/* ============================================================
   白色玻璃 · 液态 (Glassmorphism / Liquid)
   设计取向：
     - 底色偏冷白，背景铺彩色光斑，玻璃才有东西可「透」
     - 卡片 = 半透明白 + backdrop-filter 模糊 + 提亮饱和度
     - 边框用半透明白描边（玻璃边缘的高光），不用实色线
     - 圆角放大、按钮走胶囊形，整体偏「液态」
     - 层次靠模糊 + 柔和阴影，不靠重色分割线
   ============================================================ */
:root{
  /* 底：冷感浅色，衬托白玻璃 */
  --bg:#eef1f8;
  --bg2:#e6ebf5;
  --card:rgba(255,255,255,.62);
  --card-solid:#ffffff;

  /* 玻璃三件套 */
  --glass:rgba(255,255,255,.60);
  --glass-2:rgba(255,255,255,.44);
  --glass-line:rgba(255,255,255,.78);
  --glass-line2:rgba(255,255,255,.55);
  --blur:blur(20px) saturate(180%);
  --blur-l:blur(30px) saturate(200%);

  --line:rgba(255,255,255,.72);
  --line2:rgba(255,255,255,.52);

  --txt:#3c4257;
  --dim:#7b8299;
  --dim2:#a3a9bd;

  --acc:#46587f;
  --acc2:#61749d;
  --acc-soft:rgba(70,88,127,.12);
  --grad:linear-gradient(135deg,#46587f 0%,#61749d 100%);

  --ok:#2ec27e;
  --ok-soft:rgba(46,194,126,.14);
  --warn:#f59e0b;
  --warn-soft:rgba(245,158,11,.15);
  --err:#f43f6b;
  --err-soft:rgba(244,63,107,.13);

  --r:20px;
  --sh:0 4px 16px rgba(110,130,175,.10);
  --sh2:0 10px 34px rgba(110,130,175,.16);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--txt);min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;font-size:14.5px;line-height:1.6;padding-bottom:40px;
}
/*
 * 背景光斑：玻璃的「透光来源」。
 * 没有这层彩色底，白色玻璃在白底上完全看不出模糊效果。
 * 加了缓慢的漂浮动画，让整页有液态流动感。
 */
body::before{
  content:'';position:fixed;inset:-10%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(46% 32% at 12% 8%,rgba(255,150,195,.52),transparent 64%),
    radial-gradient(42% 30% at 88% 16%,rgba(150,150,255,.44),transparent 62%),
    radial-gradient(48% 34% at 78% 84%,rgba(130,215,235,.40),transparent 64%),
    radial-gradient(40% 28% at 20% 78%,rgba(255,190,140,.34),transparent 62%),
    radial-gradient(38% 26% at 52% 46%,rgba(200,170,255,.34),transparent 66%);
  filter:blur(26px);
  animation:liquidFlow 26s ease-in-out infinite alternate;
}
@keyframes liquidFlow{
  0%  {transform:translate3d(0,0,0) scale(1)}
  33% {transform:translate3d(2.5%,-2%,0) scale(1.06)}
  66% {transform:translate3d(-2%,2.5%,0) scale(1.04)}
  100%{transform:translate3d(1.5%,1.5%,0) scale(1.08)}
}
/* 再加一层细颗粒噪点，避免大面积渐变出现色带 */
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.30;
  background-image:radial-gradient(rgba(255,255,255,.55) .5px,transparent .5px);
  background-size:3px 3px;
}
@media (prefers-reduced-motion:reduce){
  body::before{animation:none}
}
.wrap{max-width:560px;margin:0 auto;padding:0 13px}
[hidden]{display:none!important}
a{color:var(--acc);text-decoration:none}
::selection{background:var(--acc-soft);color:var(--txt)}

/* ---------- 顶栏 ---------- */
.top{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.55);
  backdrop-filter:blur(30px) saturate(200%);
  backdrop-filter:var(--blur-l);
  -webkit-backdrop-filter:blur(30px) saturate(200%);
  -webkit-backdrop-filter:var(--blur-l);
  border-bottom:1px solid rgba(255,255,255,.78);
  border-bottom:1px solid var(--glass-line);
  box-shadow:0 4px 18px rgba(110,130,175,.10)}
.top-in{max-width:560px;margin:0 auto;padding:11px 13px;display:flex;align-items:center;gap:10px}
.logo{width:30px;height:30px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--grad);font-size:13px;font-weight:800;color:#fff;
  box-shadow:0 3px 9px rgba(70,88,127,.26)}
.brand{font-size:16px;font-weight:700;letter-spacing:.2px;color:var(--txt)}
.brand small{display:block;font-size:10.5px;color:var(--dim2);font-weight:400;letter-spacing:0}
.top-sp{flex:1}
.icb{width:32px;height:32px;border-radius:11px;border:1px solid var(--glass-line);
  background:rgba(255,255,255,.5);color:var(--dim);display:grid;place-items:center;
  font-size:14px;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.icb:active{transform:scale(.94)}
.txtbtn{font-size:13px;color:var(--dim);cursor:pointer;background:none;border:none;padding:5px 7px;
  font-family:inherit;border-radius:8px}
.txtbtn:active{background:var(--acc-soft)}

/* ---------- 卡片 ---------- */
.card{border-radius:20px;border-radius:var(--r);padding:15px;margin-top:12px}
.sec-h{display:flex;align-items:center;gap:7px;margin:18px 2px 9px}
.sec-h b{font-size:14px;font-weight:700}
.sec-h .cnt.ok{color:#2c9e56;background:rgba(234,250,240,.75)}
.sec-h .cnt.off{color:#8b8fa5;background:rgba(242,238,240,.7)}
.sec-h .cnt{font-size:11px;color:var(--dim);background:rgba(255,255,255,.6);
  border:1px solid rgba(255,255,255,.65);padding:1px 9px;border-radius:999px;min-width:20px;text-align:center}
.sec-h .sp{flex:1}

/* ---------- 站点通知 ---------- */
.notice{border-color:rgba(255,217,230,.8);
  background:linear-gradient(180deg,rgba(255,246,250,.8) 0%,rgba(255,253,253,.66) 100%)}
.nh{display:flex;align-items:center;gap:7px;cursor:pointer;padding:1px 0}
.nh b{font-size:14px;font-weight:700}
.nh .dotn{width:6px;height:6px;border-radius:50%;background:var(--acc);flex:none;
  box-shadow:0 0 0 3px rgba(70,88,127,.16);animation:bl 1.8s infinite}
@keyframes bl{0%,100%{opacity:1}50%{opacity:.35}}
.nh .sp{flex:1}
.nh .arw{font-size:10px;color:var(--dim2);transition:transform .22s}
.notice.open .nh .arw{transform:rotate(180deg)}
.nbody{margin-top:10px;padding-top:10px;border-top:1px dashed rgba(255,255,255,.6);display:none}
.notice.open .nbody{display:block;animation:fi .24s ease both}
.nitem{padding:7px 0;font-size:13px;line-height:1.68;border-bottom:1px dashed rgba(255,255,255,.55)}
.nitem:last-child{border-bottom:none}
.nitem .tk{display:flex;align-items:flex-start;gap:7px}
.nitem .bt{color:var(--acc);flex:none;font-size:12px;line-height:1.7}
.nitem .tx{flex:1;color:#5d4a55;word-break:break-word;min-width:0}
.nitem .tm{font-size:10.5px;color:var(--dim2);flex:none;padding-left:6px;line-height:1.8}
.nitem a{color:#46587f;text-decoration:underline;text-underline-offset:2px}
.nitem u{text-decoration-color:var(--acc);text-underline-offset:2px}

/* 富文本里的插图（公告 / 帮助 / 订阅说明通用）
   单独占一行、宽度撑满、圆角；加载中不留灰块，靠 .ph 透明 */
.rich-img{display:block;width:100%;max-width:100%;height:auto;
  margin:8px 0;border-radius:12px;background:transparent}
.rich-img.ph{opacity:0}
.rich-img.rdy{opacity:1;transition:opacity .22s}
#noticePreview .rich-img,#subPrevOn .rich-img,#subPrevOff .rich-img{max-width:100%}

.empty{padding:22px 10px;text-align:center;color:var(--dim2);font-size:12.5px}
.empty .em{display:block;font-size:20px;margin-bottom:5px;opacity:.55}

/* ---------- 机器人卡片 ---------- */
.bot{padding:13px;margin-top:11px;border-radius:20px;border-radius:var(--r);
  animation:fi .3s ease both;position:relative;padding-top:32px}
/* 机器人卡片右上角的「订阅版」标签：可点，点了看剩余时间并开通/续费 */
.sub-tag{position:absolute;top:9px;right:10px;z-index:2;cursor:pointer;
  font-size:10px;line-height:1;padding:5px 9px;border-radius:999px;
  border:1px solid var(--glass-line);background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--dim);
  max-width:calc(100% - 18px);white-space:nowrap}
.sub-tag:active{transform:scale(.96)}
.sub-tag.on{border-color:transparent;color:#fff;font-weight:600;
  background:linear-gradient(135deg,#2f8f6b,#3da17c);
  box-shadow:0 2px 7px rgba(47,143,107,.28)}
@keyframes fi{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.bot-main{display:flex;align-items:center;gap:11px}
.bot .av{width:50px;height:50px;border-radius:50%;flex:none;object-fit:cover;
  background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.7);
  box-shadow:0 2px 8px rgba(110,130,175,.14)}
.bot .mi{flex:1;min-width:0}
.bot .nm{font-size:15px;font-weight:700;letter-spacing:.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bot .uin{font-size:12.5px;color:var(--dim);margin-top:1px;letter-spacing:.3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bot .st{margin-top:5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* 运行时长：在线时是绿色小徽章，离线时灰掉显示「未运行」
 * 不加背景色，避免和「在线」标签抢视觉 —— 这行已经有 3 个信息了。 */
.up-tag{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;padding:2px 8px;
  border-radius:999px;border:1px solid var(--glass-line);color:var(--dim2);
  background:rgba(255,255,255,.45);line-height:1.5;white-space:nowrap}
.up-tag.on{color:#1fa971;border-color:#b9ecd4;background:var(--ok-soft);font-weight:600}
.up-tag i{width:5px;height:5px;border-radius:50%;background:var(--dim2);flex:none}
.up-tag.on i{background:var(--ok)}
.bot .sb{font-size:11px;color:var(--dim2);margin-top:4px}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;padding:2px 9px;border-radius:999px;
  border:1px solid var(--glass-line);color:var(--dim);
  background:rgba(255,255,255,.5);line-height:1.5}
.tag.on{color:#1fa971;border-color:#b9ecd4;background:var(--ok-soft)}
.tag.on i{width:5px;height:5px;border-radius:50%;background:var(--ok)}
.tag.off{color:#e04a6d;border-color:#ffcfda;background:var(--err-soft)}
.tag.off i{width:5px;height:5px;border-radius:50%;background:var(--err)}
.tag.warn{color:#d98220;border-color:#ffdfb8;background:var(--warn-soft)}
.tag.warn i{width:5px;height:5px;border-radius:50%;background:var(--warn)}
.bot-ops{display:flex;gap:7px;margin-top:11px;padding-top:10px;
  border-top:1px solid rgba(255,255,255,.55);flex-wrap:wrap}
.bot-ops.wrap5>button{flex:1 1 calc(33.33% - 5px);min-width:0}
.bot-ops button{flex:1;padding:8px 2px;border-radius:999px;font-size:12.5px;cursor:pointer;
  border:1px solid var(--glass-line);background:rgba(255,255,255,.55);color:#6b7285;
  font-family:inherit;font-weight:600;transition:.15s}
.bot-ops button:active{transform:scale(.95)}
/* 注意：这里原本叫 .acc，和折叠面板容器 .acc 同名，
 * 导致「功能」按钮被折叠面板的样式（margin-bottom/overflow/border）覆盖，看起来比别的按钮小。
 * 改名为 .accent 避免冲突。 */
.bot-ops button.accent{border-color:rgba(70,88,127,.3);color:#46587f;background:var(--acc-soft)}
.bot-ops button.okc{border-color:#b9ecd4;color:#1fa971;background:var(--ok-soft)}
.bot-ops button.dgc{border-color:#ffcfda;color:#e04a6d;background:var(--err-soft)}
.bot-ops button.warnc{border-color:#fcd9a8;color:#c2760d;background:#fff7e8}
.bot-ops button[disabled]{opacity:.45;cursor:not-allowed}
/* 五个按钮时收紧，保证手机上不挤 */
.bot-ops{display:flex;gap:5px}
.bot-ops button{padding:8px 1px;font-size:11.5px;letter-spacing:-.2px}
@media(max-width:360px){
  .bot-ops{gap:4px}
  .bot-ops button{font-size:11px;padding:8px 0}
}

/* ---------- 悬浮添加按钮 ---------- */
.fab{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:70;
  height:48px;padding:0 28px;border-radius:999px;border:none;cursor:pointer;
  background:var(--grad);color:#fff;font-size:14.5px;font-weight:650;font-family:inherit;
  box-shadow:0 10px 26px rgba(70,88,127,.28),inset 0 1px 0 rgba(255,255,255,.35);
  display:flex;align-items:center;gap:6px;max-width:calc(100vw - 26px)}
.fab:active{transform:translateX(-50%) scale(.96)}

/* ---------- 表单 ---------- */
.field{margin-top:11px}
.field label{display:block;font-size:12px;color:#7a6672;margin-bottom:5px;padding-left:2px;font-weight:550}
input,select,textarea{width:100%;padding:11px 13px;border-radius:14px;
  border:1px solid var(--glass-line);
  background:rgba(255,255,255,.52);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:var(--txt);font-size:14.5px;font-family:inherit;outline:none;appearance:none;
  transition:.15s}
input:focus,select:focus,textarea:focus{border-color:var(--acc);
  background:rgba(255,255,255,.72);
  box-shadow:0 0 0 3px rgba(70,88,127,.14)}
input::placeholder,textarea::placeholder{color:var(--dim2)}
select{background-image:linear-gradient(45deg,transparent 50%,#bdaab5 50%),linear-gradient(135deg,#bdaab5 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
option{background:#fff;color:var(--txt)}
textarea{resize:vertical;min-height:78px;line-height:1.65}
.btn{width:100%;padding:12px;border-radius:999px;border:none;cursor:pointer;
  background:var(--grad);color:#fff;font-size:14.5px;font-weight:650;font-family:inherit;margin-top:12px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  text-decoration:none;line-height:1.2;
  box-shadow:0 6px 18px rgba(70,88,127,.26),inset 0 1px 0 rgba(255,255,255,.35);transition:.15s}
.btn:active{transform:scale(.985);box-shadow:0 2px 10px rgba(70,88,127,.20)}
.btn[disabled]{opacity:.5;box-shadow:none}
.btn.ghost{background:rgba(255,255,255,.60);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--glass-line);color:#6b7285;
  box-shadow:var(--sh),inset 0 1px 0 rgba(255,255,255,.8)}
.btn.ghost:active{background:rgba(255,255,255,.8)}
.btn.dg{background:var(--err-soft);color:#e04a6d;border:1px solid #ffcfda;box-shadow:none}
.btn.sm{padding:9px 14px;font-size:13px;margin-top:0;width:auto}
.row{display:flex;gap:8px}
.row .btn{flex:1}

/* ---------- 分段选择 ---------- */
.seg{display:flex;gap:4px;border-radius:14px;padding:3px;margin-top:11px}
.seg button{flex:1;padding:8px;border-radius:10px;border:none;background:none;color:#8c7a86;
  font-size:13.5px;font-family:inherit;cursor:pointer;font-weight:600;transition:.18s}
.seg button.on{background:rgba(255,255,255,.92);color:#46587f;
  box-shadow:0 2px 8px rgba(110,130,175,.14),inset 0 1px 0 rgba(255,255,255,.9)}

/* ---------- 节点选择 ---------- */
.nlist{margin-top:9px;display:flex;flex-direction:column;gap:7px}
.nopt{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:16px;
  cursor:pointer;transition:.16s}
.nopt.sel{border-color:var(--acc);background:var(--acc-soft)}
.nopt.used{opacity:.5;cursor:not-allowed}
.nopt .rd{width:17px;height:17px;border-radius:50%;border:2px solid var(--line2);flex:none;position:relative}
.nopt.sel .rd{border-color:var(--acc)}
.nopt.sel .rd::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--acc)}
.nopt .ni{flex:1;min-width:0}
.nopt .nn{font-size:13.5px;font-weight:650}
.nopt .na{font-size:11px;color:var(--dim2);margin-top:1px}

/* ---------- 二维码 ---------- */
.qrwrap{position:relative;width:100%;max-width:220px;margin:14px auto 0;padding:10px;
  border-radius:24px;box-shadow:0 12px 30px rgba(110,130,175,.18)}
#qrCanvas,#ndCanvas{width:100%;height:auto;display:block;border-radius:10px;transition:filter .3s,opacity .3s}
.qrwrap.loading #qrCanvas,.qrwrap.loading #ndCanvas{opacity:0}
.qrwrap.scanning #qrCanvas{filter:blur(4px);opacity:.42}
.mask{position:absolute;inset:10px;border-radius:14px;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:7px;background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#3c4257}
.qrwrap.loading .mask.load{display:flex}
.qrwrap.scanning .mask.scan{display:flex}
.qrwrap.done .mask.ok{display:flex}
.qrwrap.done .mask.load{display:none}
.mask .tick{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#4fdc9f,#22bd7f);color:#fff;font-size:24px;font-weight:700;
  animation:pop .4s cubic-bezier(.2,1.5,.4,1) both}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.mask p{margin:0;font-size:12.5px;font-weight:650}
.mask small{font-size:11px;color:var(--dim2)}
.spin{width:26px;height:26px;border-radius:50%;border:3px solid #ffe0ec;
  border-top-color:var(--acc);animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.qrmeta{display:flex;align-items:center;justify-content:center;margin:12px 0 2px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 13px;border-radius:999px;font-size:12px;
  color:#6b7285}
.pill i{width:6px;height:6px;border-radius:50%;background:var(--acc);animation:bl 1.4s infinite}
.pill.ok{color:#1fa971;border-color:#b9ecd4;background:var(--ok-soft)}.pill.ok i{background:var(--ok);animation:none}
.pill.warn{color:#d98220;border-color:#ffdfb8;background:var(--warn-soft)}.pill.warn i{background:var(--warn);animation:none}
.pill.err{color:#e04a6d;border-color:#ffcfda;background:var(--err-soft)}.pill.err i{background:var(--err);animation:none}
.hint{font-size:12.5px;text-align:center;margin:10px 0 0;min-height:18px;word-break:keep-all}
.hint.ok{color:#1fa971}.hint.warn{color:#d98220}.hint.err{color:#e04a6d}
/* 说明文字：
 * word-break:keep-all —— 防止 smtp.qq.com / 2025.10.25-b1 这类被从中间拆断
 * overflow-wrap:break-word —— 超长串（比如整条链接）才允许强制断开
 * 长句请在 HTML 里用 <br> 明确分行，不要靠宽度自动折行（折行位置会随屏幕变，看着乱）
 */
.tip{font-size:11.5px;color:var(--dim2);text-align:center;margin:11px 0 0;line-height:1.7;
  word-break:keep-all;overflow-wrap:break-word}
.tip.left{text-align:left}
/* 单行不折：用于版本号、短标签这类绝不能被挤成两行的内容 */
.nowrap{white-space:nowrap}
.capt{margin-top:11px;padding:11px;border-radius:16px;
  background:rgba(245,158,11,.14);border:1px solid rgba(253,215,170,.8)}
.capt-h{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#c97b18;font-weight:600}

/* ---------- 弹层 ---------- */
.modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  padding:18px;background:rgba(60,70,100,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  animation:fi .22s ease both;overflow-y:auto}
.modal-box{width:100%;max-width:330px;border-radius:26px;
  padding:20px;box-shadow:0 22px 54px rgba(90,110,160,.24),inset 0 1px 0 rgba(255,255,255,.9);
  animation:pop .3s cubic-bezier(.2,1.3,.4,1) both}
.modal-h{font-size:16.5px;font-weight:700;margin-bottom:8px;text-align:center}
.modal-p{font-size:12.5px;color:#8c7a86;margin:0 0 14px;text-align:center;line-height:1.7}
#ndQrwrap{max-width:186px;padding:9px}
#ndQrwrap .mask{inset:9px}
.modal-box .btn{margin-top:0}
.modal-box .field{margin-top:0;margin-bottom:2px}

/* ---------- 提示条：灰色 / 顶部 / 同时只有一条 ---------- */
#toasts{position:fixed;left:0;right:0;top:0;z-index:300;display:flex;
  justify-content:center;pointer-events:none;padding:12px 15px 0}
.toast{max-width:100%;background:rgba(58,64,84,.82);color:#fff;border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  padding:10px 18px;border-radius:999px;font-size:12.5px;line-height:1.5;
  box-shadow:0 8px 24px rgba(60,70,100,.24);
  opacity:0;transform:translateY(-14px);transition:opacity .26s ease,transform .26s ease}
.toast.show{opacity:1;transform:translateY(0)}
/* 状态只用左侧小圆点区分，整体保持灰色 */
.toast.ok{background:rgba(58,64,84,.82)}
.toast.ok::before{content:'✓';display:inline-block;margin-right:6px;color:#8ef0bd}
.toast.err{background:rgba(58,64,84,.82)}
.toast.err::before{content:'!';display:inline-block;margin-right:6px;color:#ffb3c4;font-weight:700}

/* ---------- 登录页 ---------- */
.auth{max-width:370px;margin:5vh auto 0;padding:0 15px}
.auth-box{border-radius:26px;padding:24px 20px;box-shadow:var(--sh2)}
.auth-h{text-align:center;margin-bottom:18px}
.auth-h .lg{width:50px;height:50px;border-radius:15px;margin:0 auto 11px;display:grid;place-items:center;
  background:var(--grad);font-size:21px;font-weight:800;color:#fff;
  box-shadow:0 5px 14px rgba(70,88,127,.26)}
.auth-h b{font-size:19px;font-weight:700}
.auth-h p{margin:4px 0 0;font-size:12.5px;color:var(--dim2)}

/* ---------- 后台管理 ---------- */
.admin-row{display:flex;align-items:flex-start;gap:9px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.5)}
.admin-row:last-child{border-bottom:none}
.admin-row .t{flex:1;min-width:0;text-align:left}
.admin-row .t b{display:block;font-size:13.5px;font-weight:700;text-align:left;line-height:1.5}
/* 完整显示，不省略：地址、密钥、功能页都可能很长 */
.admin-row .t span{font-size:11px;color:#8c7a86;display:block;margin-top:2px;
  text-align:left;word-break:break-all;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.55}
.admin-row .x{width:28px;height:28px;border-radius:10px;border:1px solid rgba(244,63,107,.28);
  background:rgba(244,63,107,.12);color:#e04a6d;display:grid;place-items:center;cursor:pointer;flex:none;
  font-size:12.5px;font-family:inherit;margin-top:1px}
.admin-row .x.ed{border-color:rgba(70,88,127,.28);background:rgba(70,88,127,.10);color:#46587f}
.admin-row .x:active{transform:scale(.92)}
.tabs{display:flex;gap:4px;border-radius:15px;padding:3px;margin-top:13px}
.tabs button{flex:1;padding:8px 2px;border-radius:10px;border:none;background:none;color:#8c7a86;
  font-size:12.5px;font-family:inherit;cursor:pointer;font-weight:600;transition:.18s}
.tabs button.on{background:rgba(255,255,255,.92);color:#7c5cf0;
  box-shadow:0 2px 8px rgba(110,130,175,.14),inset 0 1px 0 rgba(255,255,255,.9)}
.code-box{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;
  border-radius:13px;padding:9px 11px;margin-top:6px;
  word-break:break-all;color:#46587f;cursor:pointer;user-select:all}
.foot-note{text-align:center;font-size:11px;color:var(--dim2);margin:18px 0 8px;line-height:1.75}

@media(max-width:380px){.brand{font-size:15px}.bot .av{width:46px;height:46px}.bot-ops button{font-size:12px}}

/* 小号状态标签：后台节点名旁边那个「使用中」 */
.tag.sm{font-size:9.5px;padding:1px 6px;gap:3px;border-radius:20px;line-height:1.5;letter-spacing:.2px}
.tag.sm i{width:4px;height:4px}

/* 后台公告编辑器的行内代码提示 */
code{background:var(--bg2);border:1px solid var(--line);border-radius:5px;
  padding:0 4px;font-size:10.5px;color:#46587f;font-family:ui-monospace,Menlo,Consolas,monospace}

/* 超小状态标签：节点名旁边那个「在用 / 空闲」 */
.tag.xs{font-size:9px;padding:0 5px;gap:2px;border-radius:20px;line-height:1.5;letter-spacing:0}
.tag.xs i{width:3.5px;height:3.5px}

/* 节点卡片：上面信息，下面四个带文字的按钮 */
.node-card{padding:12px;border-radius:16px;margin-bottom:9px}
.node-card:last-child{margin-bottom:0}
.node-h{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.node-h b{font-size:14px;font-weight:700;letter-spacing:.2px}
.node-info{margin-top:8px}
.nl{display:flex;align-items:flex-start;gap:8px;font-size:11.5px;line-height:1.65;padding:1.5px 0}
.nl .nk{color:var(--dim2);flex:none;width:52px}
.nl .nv{flex:1;min-width:0;color:#7a6672;word-break:break-all;white-space:normal}
.nl .nv.mono{font-family:ui-monospace,Menlo,Consolas,monospace;user-select:all}
/* API 卡片里的调用地址等：强制一行完整显示，过长可横向滑动，绝不折行 */
.api-info .nl{align-items:center}
.api-info .nl .nk{flex:none;width:auto;min-width:56px;white-space:nowrap}
.api-info .nl .nv{white-space:nowrap;overflow-x:auto;overflow-y:hidden;word-break:normal;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.api-info .nl .nv::-webkit-scrollbar{display:none}
/* 可复制的 API 地址：加个小手型 + 按下反馈，提示「点一下能复制」 */
.api-info .nl.api-row{cursor:pointer;border-radius:8px;padding:3px 4px;margin:0 -4px}
.api-info .nl.api-row:active{background:var(--bg2)}
.api-info .nl.api-row .nv{color:var(--acc);text-decoration:underline dotted;
  text-underline-offset:3px;text-decoration-thickness:1px}
.node-card .bot-ops{margin-top:10px;padding-top:9px}

/* 空状态里的自定义插图 */
.empty .em-img{width:38px;height:38px;object-fit:contain;margin:0 auto 6px;display:block}

/* 顶栏「添加」按钮 */
.add-btn{padding:6px 14px;border-radius:999px;border:none;cursor:pointer;
  background:var(--grad);color:#fff;font-size:12px;font-weight:600;font-family:inherit;
  box-shadow:0 3px 10px rgba(70,88,127,.24),inset 0 1px 0 rgba(255,255,255,.35)}
.add-btn:active{transform:scale(.95)}

/* logo 位：有配置图时显示图，没配时显示文字兜底 */
.logo img,.lg img{width:100%;height:100%;border-radius: inherit;object-fit:cover;display:block}
.logo[data-x] img,.lg[data-x] img{display:none}
.logo,.lg{overflow:hidden}

/* 后台图片配置预览 */
.pic-prev{margin-top:6px;min-height:0}
.pic-prev img{max-height:34px;max-width:100%;object-fit:contain;border-radius:8px;
  border:1px solid var(--line);background:var(--bg2);padding:3px 6px}

/* 验证码：输入框 + 发送按钮并排 */
.code-row{display:flex;gap:8px;align-items:stretch}
.code-row input{flex:1;min-width:0}
.code-btn{flex:none;padding:0 15px;border-radius:999px;border:1px solid rgba(70,88,127,.32);
  background:rgba(70,88,127,.12);color:#46587f;font-size:12.5px;font-weight:600;
  font-family:inherit;cursor:pointer;white-space:nowrap;transition:.15s}
.code-btn:active{transform:scale(.95)}
.code-btn[disabled]{opacity:.5;cursor:not-allowed}

/* 左上角：当前账号的 QQ 头像 + 昵称 + QQ 号 */
.me-box{display:flex;align-items:center;gap:9px;min-width:0;flex:1}
.me-av{width:34px;height:34px;border-radius:50%;flex:none;object-fit:cover;
  background:var(--bg2);border:1px solid var(--line2)}
/* 头像的文字兜底：跟真头像一样是圆形，避免方块看着像占位符 */
.me-av-txt{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--grad);color:#fff;font-size:14px;font-weight:800}
.me-info{min-width:0;display:flex;flex-direction:column;line-height:1.25}
.me-info b{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-info span{font-size:11px;color:var(--dim2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 后台图片配置项 */
.pic-item{padding:11px 0;border-bottom:1px dashed rgba(255,255,255,.5)}
.pic-item:last-of-type{border-bottom:none}
.pic-h{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.pic-h b{font-size:13px;font-weight:650}
.pic-h .sp{flex:1}
.up-btn{padding:5px 13px;border-radius:999px;border:1px solid rgba(255,201,221,.8);cursor:pointer;
  background:rgba(70,88,127,.12);color:#46587f;font-size:11.5px;font-weight:600;font-family:inherit}
.up-btn:active{transform:scale(.94)}

/* 复选框 */
/* 复选框：必须恢复原生外观。
   上面通用规则里的 appearance:none 会把勾选框抹成白块，导致点不动（尤其 iOS Safari）。 */
input[type=checkbox]{
  -webkit-appearance:checkbox;appearance:checkbox;
  width:17px;height:17px;flex:none;padding:0;margin:0;
  border:none;background:none;border-radius:0;box-shadow:none;
  accent-color:var(--acc);cursor:pointer;vertical-align:middle}
input[type=checkbox]:focus{box-shadow:none;border:none}
label.chk{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#7a6672;
  cursor:pointer;user-select:none;margin-top:11px;padding:6px 0}
/*
label.chk input[type=checkbox]:checked{accent-color:var(--acc)}*/


/* 用户卡片（可展开机器人明细） */
.user-card{padding:12px;border-radius:16px;margin-bottom:9px}
.user-card:last-child{margin-bottom:0}
.tag.xs.off{background:rgba(194,65,95,.12);color:#c2415f}
.tag.xs.on i{background:#22c55e}
.tag.xs.off i{background:#c2415f}

/* 机器人明细列表 */
.user-bots{margin-top:9px;padding-top:9px;border-top:1px dashed rgba(255,255,255,.5)}
.ub-empty{font-size:11.5px;color:var(--dim2);padding:4px 0}
.ub-row{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.5)}
.ub-row:last-child{border-bottom:none}
.ub-av{width:30px;height:30px;border-radius:50%;flex:none;object-fit:cover;background:var(--bg2)}
.ub-mid{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.ub-mid b{font-size:12.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ub-mid span{font-size:10.5px;color:var(--dim2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- 底部导航栏 ---------- */
body.has-nav{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
.nav-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:flex;background:rgba(255,255,255,.58);
  backdrop-filter:blur(30px) saturate(200%);
  backdrop-filter:var(--blur-l);
  -webkit-backdrop-filter:blur(30px) saturate(200%);
  -webkit-backdrop-filter:var(--blur-l);
  border-top:1px solid rgba(255,255,255,.78);
  border-top:1px solid var(--glass-line);
  box-shadow:0 -4px 20px rgba(110,130,175,.10);
  padding-bottom:env(safe-area-inset-bottom)}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:7px 0 6px;border:none;background:none;cursor:pointer;
  font-family:inherit;font-size:10.5px;color:var(--dim2);transition:.15s}
.nav-item svg{width:21px;height:21px;display:block}
.nav-item.on{color:var(--acc);font-weight:600}
.nav-item.on svg{stroke-width:2.1}
.nav-item:active{opacity:.6}

/* ---------- 我的页面 ---------- */
.mine-hd{display:flex;align-items:center;gap:12px;padding:15px 14px;border-radius:22px}
.mine-av{width:52px;height:52px;border-radius:50%;flex:none;object-fit:cover;background:#fff}
.mine-av-t{width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--grad);color:#fff;font-size:19px;font-weight:800}
.mine-nm{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.35}
.mine-nm b{font-size:15.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mine-nm span{font-size:11.5px;color:var(--dim2)}

.mine-stat{display:flex;gap:9px;margin-top:11px}
.mine-stat .card{flex:1;margin:0;padding:13px 10px;text-align:center}
.mine-stat .v{font-size:19px;font-weight:800;line-height:1.2}
.mine-stat .k{font-size:11px;color:var(--dim2);margin-top:3px}
.mine-stat .v.gold{color:#e0902f}

.mine-row{display:flex;align-items:center;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.5)}
.mine-row:last-child{border-bottom:none}
.mine-row .k{font-size:13px;color:#7a6672;flex:none;min-width:78px}
.mine-row .v{flex:1;font-size:13.5px;text-align:right;word-break:break-all}
.mine-row .act{flex:none;margin-left:8px}

/* ---------- 充值面板 ---------- */
.pay-amt{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pay-amt button{flex:1;min-width:calc(33.33% - 6px);padding:11px 4px;border-radius:16px;
  color:var(--txt);font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:.15s}
.pay-amt button.on{border-color:var(--acc);background:var(--acc-soft);color:#46587f;
  box-shadow:0 0 0 3px rgba(255,111,165,.12)}
.pay-amt button:active{transform:scale(.97)}
.pay-tip{font-size:11.5px;color:var(--dim2);margin-top:8px;line-height:1.6}
.pay-way{display:flex;gap:8px;margin-top:12px}
.pay-way button{flex:1;padding:10px 4px;border-radius:16px;
  font-family:inherit;font-size:13px;cursor:pointer;color:var(--txt)}
.pay-way button.on{border-color:var(--acc);background:var(--acc-soft);color:#46587f;font-weight:600}
.pay-bal{display:flex;align-items:baseline;gap:6px;justify-content:center;
  padding:12px 0 4px;font-size:12.5px;color:var(--dim2)}
.pay-bal b{font-size:24px;font-weight:800;color:#e0902f}

/* 等待支付 */
.pay-wait{text-align:center;padding:6px 0}
.pay-wait .spin{width:30px;height:30px;margin:6px auto 10px;border-radius:50%;
  border:3px solid var(--line2);border-top-color:var(--acc);animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.pay-wait .t{font-size:14px;font-weight:650}
.pay-wait .s{font-size:12px;color:var(--dim2);margin-top:6px;line-height:1.6}

/* 账单 */
.rec-row{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.5)}
.rec-row:last-child{border-bottom:none}
.rec-mid{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.rec-mid b{font-size:12.5px;font-weight:600}
.rec-mid span{font-size:10.5px;color:var(--dim2)}
.rec-amt{flex:none;font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums}
.rec-amt.plus{color:#16a34a}
.rec-amt.minus{color:#c2415f}

/* ---------- 弹窗：头尾固定、中间滚动 ----------
 * 普通弹窗整体滚（内容短，无所谓）；
 * 加了 .pane 的弹窗改成三段式：标题和按钮固定，只有列表滚动，
 * 这样记录再多「关闭」也一直露在外面，不会跟着滚走。 */
.modal-box.pane{max-height:82vh;overflow:hidden;display:flex;flex-direction:column;
  padding-bottom:0}
.modal-box.pane .modal-h,.modal-box.pane .modal-p{flex:none}
.modal-pane{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;touch-action:pan-y;padding-right:2px}
/* 超过 6 条时最多 264px（约 6 行），多出来的下滑看。
 * 用 flex + min-height:0 + max-height：内容多时封顶可滚，
 * 小屏幕空间不够时能继续压缩，不会被裁掉。 */
.modal-pane.limit6{flex:1 1 auto;min-height:0;max-height:264px}
/* 记录不足 6 条时不限制高度，避免留一大片空白 */
.modal-pane.limit6.few{flex:0 0 auto;height:auto;max-height:none}
.modal-foot{flex:none;padding:10px 0 14px;border-top:1px solid var(--line);margin-top:4px}
.modal-foot .row{margin-top:0}
.modal-more{flex:none;font-size:10.5px;color:var(--dim2);text-align:center;
  padding:6px 0 0;line-height:1.5}

/* ---------- 弹层打开时禁止背景滚动 ---------- */
/* 锁背景滚动只需 fixed + overflow:hidden。
 * 千万不要在这里写 touch-action:none——它会连带禁掉弹窗内部的触摸滚动，
 * 导致「下滑查看更多」在手机上完全划不动（真机实测的坑）。 */
body.modal-open{overflow:hidden}
.modal{overscroll-behavior:contain;touch-action:pan-y}
/*
 * 弹窗三段式：标题(fixed) / 内容(.modal-b 可滚) / 底栏(fixed)。
 * 之前是整个弹窗一起滚，内容多时底栏会被推到屏幕外，
 * 用户得把整屏滑到底才摸得到「关闭」。
 */
.modal-box{display:flex;flex-direction:column;max-height:82vh;overflow:hidden;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* 唯一可滚动的区域。flex:1 + min-height:0 才能在 flex 容器里正确限高滚动 */
.modal-b{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;touch-action:pan-y}
.modal-box>.modal-h,.modal-box>.row{flex:none}
/* 内容区为空（纯确认框）时不要留空隙 */
.modal-b:empty{display:none}

/* ---------- 收益统计卡片 ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px}
.stat-card{min-width:0;padding:11px 8px;border-radius:18px;text-align:center}
.stat-card .sk{font-size:11px;color:var(--dim2);margin-bottom:3px}
.stat-card .sv{font-size:19px;font-weight:800;line-height:1.15;
  font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.stat-card .sc{font-size:10px;color:var(--dim2);margin-top:2px}
.stat-card.all{background:linear-gradient(160deg,rgba(255,246,250,.78),rgba(253,241,255,.72));border-color:rgba(255,217,230,.8)}
.stat-card.all .sv{color:#c2417f}
.stat-card.ok{background:linear-gradient(160deg,rgba(240,253,244,.78),rgba(236,253,245,.72));border-color:rgba(187,247,208,.8)}
.stat-card.ok .sv{color:#16a34a}
.stat-card.no{background:linear-gradient(160deg,rgba(255,247,237,.78),rgba(255,251,235,.72));border-color:rgba(254,215,170,.8)}
.stat-card.no .sv{color:#ea580c}
.stat-card.td{background:linear-gradient(160deg,rgba(238,244,255,.78),rgba(245,240,255,.72));border-color:rgba(205,218,252,.8)}
.stat-card.td .sv{color:#5b6fd8}
@media(max-width:340px){
  .stat-grid{gap:6px}
  .stat-card .sv{font-size:17px}
  .stat-card .sk{font-size:10px}
}

/* ---------- 分类筛选条 ---------- */
.filter-bar{display:flex;gap:6px;margin:10px 0 2px}
.filter-bar .fb{flex:1;padding:8px 4px;border-radius:999px;font-size:12.5px;font-weight:600;
  cursor:pointer;font-family:inherit;border:1px solid var(--glass-line);
  background:rgba(255,255,255,.5);color:#6b7285;transition:.15s}
/* 弹窗里也要保持胶囊形：.modal-b 内的元素不会被别的规则改圆角 */
.modal-b .filter-bar .fb{border-radius:999px}
.filter-bar .fb:active{transform:scale(.96)}
/* ---------- 底部上滑面板（sheet）----------
 * 从屏幕底部升起，单手拇指就够得着，比居中弹窗顺手。
 * 用于「更多操作」这类需要选一项的场景。 */
.modal-box.sheet{align-self:flex-end;max-width:400px;border-radius:22px 22px 0 0;
  max-height:76vh;margin-top:auto;animation:sheetUp .22s cubic-bezier(.2,.8,.25,1) both}
@keyframes sheetUp{from{transform:translateY(28px);opacity:.4}to{transform:none;opacity:1}}
@media(min-width:520px){
  /* 宽屏（平板/电脑）仍然居中显示，不然贴底看着怪 */
  .modal-box.sheet{align-self:center;border-radius:26px;margin-top:0}
}
/* 菜单条目：图标 + 文字，一行一个 */
.menu-item{display:flex;align-items:center;gap:11px;width:100%;padding:12px 4px;
  border:0;border-radius:14px;background:transparent;font-family:inherit;
  font-size:14px;color:var(--txt);cursor:pointer;text-align:left;transition:.12s}
.menu-item+.menu-item{border-top:1px solid rgba(110,130,175,.10)}
.menu-item:active{background:rgba(110,130,175,.09)}
.menu-item[disabled]{opacity:.4;cursor:not-allowed}
.menu-item i{flex:none;display:flex;color:var(--dim2)}
.menu-item span{flex:1;min-width:0}
.menu-item.t-dgc{color:#e04a6d}
.menu-item.t-dgc i{color:#e04a6d}
.menu-item.t-warnc{color:#c2760d}
.menu-item.t-warnc i{color:#c2760d}
.menu-item.t-okc{color:#1fa971}
.menu-item.t-okc i{color:#1fa971}
.menu-item.t-accent{color:#46587f}
.menu-item.t-accent i{color:#46587f}
/* 卡片「更多」按钮：只占一个图标位，不挤占登录按钮 */
.bot-ops button.more{flex:none;width:40px;padding:0;display:flex;align-items:center;
  justify-content:center;color:var(--dim2);border-radius:999px}
/* 体检结果卡片：分数 + 等级做成一行大字，指标用紧凑的两列网格，比堆四行长文清楚 */
.hcard .node-h{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.hcard .node-h b{font-size:13.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hcard .h-meter{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 10px;margin-top:2px}
.hcard .h-m{display:flex;align-items:baseline;gap:5px;font-size:11.5px}
.hcard .h-m i{font-style:normal;color:var(--dim2);flex:none;width:44px}
.hcard .h-m b{font-weight:600;font-size:12px;color:var(--txt)}
/* 弹窗顶部统计：一行两个圆角胶囊，比裸文本行清楚，也不会看着像方块 */
.sum-pill{display:flex;gap:7px;margin-bottom:9px}
.sum-pill .sp-i{flex:1;display:flex;align-items:baseline;gap:5px;justify-content:center;
  padding:7px 8px;border-radius:999px;font-size:12px;
  background:rgba(255,255,255,.55);border:1px solid var(--glass-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.sum-pill .sp-i b{font-size:14px;font-weight:700;color:var(--txt)}
.sum-pill .sp-i span{color:var(--dim2);font-size:11.5px;white-space:nowrap}
.sum-pill .sp-i.on b{color:#1fa971}
.filter-bar .fb.on{border-color:var(--acc);color:var(--acc);background:var(--acc-soft)}

/* ---------- 添加机器人：额度卡 ---------- */
.quota-card{margin:0 0 12px;padding:16px 15px;border-radius:18px;color:#fff;
  background:linear-gradient(135deg,#46587f 0%,#5a6d95 55%,#6f83ab 100%);
  box-shadow:0 8px 20px rgba(70,88,127,.26);position:relative;overflow:hidden}
.quota-card::after{content:'';position:absolute;right:-30px;top:-40px;width:120px;height:120px;
  border-radius:50%;background:rgba(255,255,255,.14)}
.quota-card::before{content:'';position:absolute;right:24px;bottom:-46px;width:88px;height:88px;
  border-radius:50%;background:rgba(255,255,255,.10)}
.qc-h{display:flex;align-items:center;gap:11px;position:relative;z-index:1}
.qc-ico{width:40px;height:40px;border-radius:13px;background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;font-size:20px;flex:none}
.qc-t b{display:block;font-size:16.5px;font-weight:800;letter-spacing:-.2px}
.qc-t small{display:block;font-size:11.5px;opacity:.88;margin-top:2px}
/*
 * 白字描边：细描边 + 柔和投影，任何底色下都看得清。
 * 用 text-shadow 而不是 -webkit-text-stroke：描边不会把细笔画吃掉，
 * 小字号（10px 的单位）也不会糊成一团。
 */
.quota-card,.quota-card b,.quota-card small,.quota-card .qc-k,
.quota-card .qc-v,.quota-card .qc-u{
  text-shadow:0 1px 2px rgba(0,0,0,.45),0 0 1px rgba(0,0,0,.55);
  -webkit-text-stroke:.3px rgba(0,0,0,.35);
  paint-order:stroke fill;
}
.qc-grid{display:flex;gap:8px;margin-top:14px;position:relative;z-index:1}
.qc-cell{flex:1;min-width:0;padding:9px 6px;border-radius:16px;text-align:center;
  background:rgba(255,255,255,.20);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.qc-k{font-size:10.5px;opacity:.9}
.qc-v{font-size:19px;font-weight:800;line-height:1.2;margin-top:2px;
  font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.qc-v.free{font-size:16px}
.qc-v.pay{color:#fff8d6}
.qc-u{font-size:10px;opacity:.85;margin-top:1px}
.qc-note{margin-top:11px;padding:8px 11px;border-radius:11px;font-size:12px;line-height:1.45;
  position:relative;z-index:1;background:rgba(255,255,255,.9);color:#7a4a63}
.qc-note.warn{background:#fff4e0;color:#a35b12}
.qc-note.ok{background:#eafaf1;color:#1c7a51}

/* ---------- 添加机器人：节点选择卡 ---------- */
.pick-card{padding:13px 14px}
.pk-row{display:flex;align-items:center;gap:11px}
.pk-l{flex:1;min-width:0;display:flex;align-items:center;gap:11px}
.pk-ico{width:38px;height:38px;border-radius:12px;background:var(--acc-soft);
  display:flex;align-items:center;justify-content:center;font-size:18px;flex:none}
.pk-t b{display:block;font-size:14.5px;font-weight:700}
.pk-t small{display:block;font-size:11.5px;color:var(--dim2);margin-top:2px}
.pk-btn{flex:none;padding:8px 18px;border-radius:12px;border:none;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#46587f,#61749d);
  box-shadow:0 4px 10px rgba(70,88,127,.26);transition:.15s}
.pk-btn:active{transform:scale(.94)}
.pk-btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none}
.pick-card.done{border-color:#b9ecd4;background:linear-gradient(160deg,#f6fdf9,#fff)}
.pick-card.done .pk-ico{background:var(--ok-soft)}

/* ---------- 节点选择器列表 ---------- */
.np-list{max-height:52vh;overflow-y:auto;margin:6px -4px 0;-webkit-overflow-scrolling:touch}
.np-item{display:flex;align-items:center;gap:11px;padding:11px 10px;border-radius:13px;
  cursor:pointer;transition:.15s;border:1px solid transparent}
.np-item:active{background:var(--acc-soft);transform:scale(.985)}
.np-item:hover{background:#fdf7fa}
.np-ico{width:34px;height:34px;border-radius:11px;background:var(--acc-soft);
  display:flex;align-items:center;justify-content:center;font-size:16px;flex:none}
.np-t{flex:1;min-width:0}
.np-t b{display:block;font-size:14px;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-t small{display:block;font-size:11px;color:var(--dim2);margin-top:1px}
.np-item.cur .np-t small{color:var(--acc)}
.np-ar{font-size:19px;color:#c9b8c2;flex:none}

/* ---------- 内联 SVG 图标 ---------- */
svg.ic{display:inline-block;vertical-align:middle;flex:none}
.empty .em svg.ic{display:block;margin:0 auto}
.empty .em{color:var(--dim2)}
.qc-ico svg.ic,.pk-ico svg.ic,.np-ico svg.ic{color:inherit}

/* 静态图标位（data-ico）居中 */
[data-ico]{display:inline-flex;align-items:center;justify-content:center}

textarea{resize:vertical;min-height:88px;line-height:1.6;font-family:inherit;font-size:14px}

/* 二维码遮罩里的对勾：用 SVG 画，居中 */
.mask .tick[data-ico]{display:flex;align-items:center;justify-content:center}
.mask .tick svg.ic{width:26px;height:26px;stroke-width:2.6}

/* 管理员标签：紫蓝，跟普通用户区分 */
.tag.adm{color:#46587f;border-color:rgba(70,88,127,.25);background:rgba(70,88,127,.10)}
.tag.xs.adm{background:rgba(70,88,127,.10);color:#46587f}

/* 复制失败时展示整条链接，方便长按手动复制 */
.linkbox{margin-top:10px;padding:10px 11px;border-radius:14px;background:rgba(255,255,255,.5);
  border:1px dashed rgba(255,255,255,.6);font-size:11.5px;line-height:1.6;color:#5b6478;
  word-break:break-all;max-height:110px;overflow-y:auto;-webkit-user-select:all;user-select:all}

/* ==================== 后台总览：一屏看全 ====================
 * 之前所有内容堆在一个长页面里，要滑很久才能看到下面的功能。
 * 现在改成：总览页放关键数据和快捷入口，具体配置收进折叠面板。
 */
.ov-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}
.ov-card{padding:10px 6px;border-radius:16px;text-align:center;min-width:0}
.ov-card.warn{background:linear-gradient(160deg,rgba(255,247,250,.8),rgba(255,240,246,.7));
  border-color:rgba(244,199,212,.85)}
.ov-v{font-size:18px;font-weight:800;line-height:1.15;color:#5d4a55;
  font-variant-numeric:tabular-nums}
.ov-card.warn .ov-v{color:#c2415f}
.ov-v small{font-size:11px;font-weight:600;color:var(--dim2)}
.ov-k{font-size:10.5px;color:var(--dim2);margin-top:3px;white-space:nowrap}
.ov-s{font-size:9.5px;color:#b6a5af;margin-top:2px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

/* 快捷入口 */
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}
.quick-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:11px 4px;border-radius:16px;cursor:pointer;min-width:0;
  transition:transform .12s,box-shadow .12s}
.quick-btn:active{transform:scale(.96)}
.quick-btn .qb-i{width:26px;height:26px;border-radius:10px;display:flex;
  align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(70,88,127,.13),rgba(70,88,127,.07));
  color:#46587f;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.quick-btn .qb-t{font-size:10.5px;color:#6b5a63;font-weight:600;white-space:nowrap}

/* 需要关注：掉线/异常的机器人 */
.warn-list{margin-top:9px}
.warn-row{display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:14px;
  margin-bottom:6px}
.warn-row:last-child{margin-bottom:0}
.warn-row .wr-ic{flex:none;color:#c2415f;display:flex}
.warn-row .wr-mid{flex:1;min-width:0}
.warn-row .wr-t{font-size:12.5px;font-weight:600;color:#6b5a63;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.warn-row .wr-s{font-size:10.5px;color:var(--dim2);margin-top:1px}
/* 「重复 ×N」标记：两条记录一模一样时，靠它分辨出来 */
.warn-row .wr-conflict{margin-top:3px;font-size:11.5px;line-height:1.5;color:#c2415f;
  background:rgba(194,65,95,.09);border-radius:7px;padding:3px 7px}
.wr-dup{flex:none;display:inline-block;margin-left:6px;padding:1px 6px;
  border-radius:999px;font-size:9.5px;font-weight:700;letter-spacing:.2px;
  color:#b45309;background:rgba(251,191,36,.16);border:1px solid rgba(217,164,60,.4)}
/* 查重弹窗里的分组列表 */
.dup-list{display:flex;flex-direction:column;gap:10px}
.dup-h{font-size:11.5px;font-weight:700;color:#b45309;padding:0 2px}
.dup-row{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:14px;
  background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.8)}
.dup-row .dup-m{flex:1;min-width:0}
.dup-row .dup-t{font-size:12px;font-weight:600;color:var(--txt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dup-row .dup-s{font-size:10.5px;color:var(--dim2);margin-top:2px}
.wr-all-ok{padding:12px;border-radius:14px;
  background:linear-gradient(160deg,rgba(244,251,246,.8),rgba(238,252,242,.7));
  border-color:rgba(213,236,217,.85);
  text-align:center;font-size:11.5px;color:#2c9e57}

/* ==================== 加载占位：未就绪一律透明 ====================
 * 数据 / 图片还没到位时，页面上会露出灰底方块、圆形字母（N / ?）、
 * 灰色「读取中…」字样 —— 看着像一堆没渲染好的色块。
 *
 * 现在统一：
 *   .ph      → 默认透明，就绪后由 JS 加 .rdy 淡入（用于头像文字兜底）
 *   img.ph   → 图片未 load 完保持透明（load 后 JS 直接移除 .ph，不留隐形风险）
 *   .ph-txt  → 只让字透明，元素占位保留，防止文字到位时布局跳动
 */
.ph{opacity:0!important;transition:opacity .22s ease}
.ph.rdy{opacity:1!important}
img.ph{background:transparent!important}
.ph-txt{color:transparent!important}

/*
 * 页面刚打开、数据还没回来（body.app-boot）时，
 * 头像的文字兜底（方块里的 N / ?）也一起藏起来 ——
 * 只靠 .ph 还不够：有的页面 renderMe 拿到用户数据后会主动加 .rdy，
 * 那时其他数据可能还在路上，方块就会先冒出来。
 * 等 JS 判定「就绪」后移除 app-boot，该显示的全部显示。
 */
body.app-boot .me-av-txt,body.app-boot .mh-av-t,
body.app-boot .mine-av-t,body.app-boot .ub-av-t{opacity:0!important}

/* ==================== 折叠面板 ====================
 * 设置项收起来，页面不再是长长一条，一眼能看到所有分组。
 */
.acc{border-radius:18px;margin-bottom:9px;overflow:hidden}
.acc:last-child{margin-bottom:0}
.acc-h{width:100%;display:flex;align-items:center;gap:8px;padding:12px 13px;
  background:none;border:0;cursor:pointer;text-align:left;font:inherit;min-width:0}
.acc-h:active{background:var(--bg2)}
.acc-h .ah-t{font-size:13.5px;font-weight:700;color:#5d4a55;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc-badge{flex:none;font-size:9.5px;padding:2px 8px;border-radius:999px;
  background:rgba(255,255,255,.62);color:#7b8299;white-space:nowrap;
  border:1px solid rgba(255,255,255,.6)}
.acc-badge.ok{background:#e6f7ec;color:#2f9e56}
.acc-badge.warn{background:#fff2e0;color:#c47a1e}
.acc-badge.off{background:#f7e9ef;color:#c4567f}
.acc-ar{flex:none;color:#c3b2bb;font-size:11px;transition:transform .18s}
.acc.open .acc-ar{transform:rotate(180deg)}
.acc-b{padding:0 13px 13px;border-top:1px solid rgba(255,255,255,.5);display:none}
.acc.open .acc-b{display:block}
.acc-b>.card{border:0;padding:0;margin:0;background:none}

/* ==================== 前台布局重做 ====================
 * 目标：一屏能看到关键信息和入口，不用来回滑；
 *      文字按语义用 <br> 分行，不靠宽度自动折行（折行位置会随屏幕变，看着乱）。
 */

/* 概览条：一行看全关键数字 */
.idx-ov{display:flex;align-items:stretch;gap:0;margin-top:11px;
  border-radius:18px;overflow:hidden}
.idx-ov .cell{flex:1;padding:10px 4px;text-align:center;min-width:0;
  border-right:1px solid rgba(255,255,255,.5)}
.idx-ov .cell:last-child{border-right:0}
.idx-ov .cv{font-size:17px;font-weight:800;color:#5d4a55;line-height:1.15;
  font-variant-numeric:tabular-nums}
.idx-ov .cv.on{color:#1fa971}
.idx-ov .cv.warn{color:#d98220}
.idx-ov .ck{font-size:10px;color:var(--dim2);margin-top:2px;white-space:nowrap}

/* 我的页：顶部大卡 */
.mine-hero{display:flex;align-items:center;gap:12px;padding:15px 14px;
  border-radius:22px;margin-top:11px}
.mine-hero .mh-av{width:52px;height:52px;border-radius:16px;flex:none;
  object-fit:cover;background:#fff;border:1px solid var(--line)}
.mine-hero .mh-av-t{width:52px;height:52px;border-radius:16px;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:800;
  color:#fff;background:linear-gradient(135deg,#46587f,#61749d)}
.mine-hero .mh-mid{flex:1;min-width:0}
.mine-hero .mh-nm{font-size:16px;font-weight:800;color:#5d4a55;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mine-hero .mh-sub{font-size:11.5px;color:var(--dim2);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mine-hero .mh-bal{flex:none;text-align:right}
.mine-hero .mh-bal .bv{font-size:19px;font-weight:800;color:#e0941f;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.mine-hero .mh-bal .bk{font-size:9.5px;color:var(--dim2);margin-top:1px;white-space:nowrap}

/* 功能入口网格 */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:11px}
.feat-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;padding:12px 3px;border-radius:17px;cursor:pointer;min-width:0}
.feat-btn:active{transform:scale(.96)}
.feat-btn .fb-i{width:28px;height:28px;border-radius:11px;display:flex;
  align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(70,88,127,.13),rgba(70,88,127,.07));color:#46587f;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.feat-btn .fb-t{font-size:10px;color:#6b5a63;font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* 资料行：左标签右内容，底线分隔，整整齐齐 */
.info-list{margin-top:11px;border-radius:18px;overflow:hidden}
.info-row{display:flex;align-items:center;gap:10px;padding:11px 13px;
  border-bottom:1px solid rgba(255,255,255,.5);min-height:44px}
.info-row:last-child{border-bottom:0}
.info-row .ik{flex:none;width:62px;font-size:12px;color:var(--dim2)}
.info-row .iv{flex:1;min-width:0;font-size:13px;color:#5d4a55;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.info-row .ia{flex:none}

/* 分组标题：带计数 */
.blk-h{display:flex;align-items:center;gap:7px;margin:15px 0 8px;padding:0 2px}
.blk-h b{font-size:14px;color:#5d4a55}
.blk-h .cnt{font-size:11px;color:var(--dim2);background:rgba(255,255,255,.6);
  padding:1px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.6)}
.blk-h .sp{flex:1}

/* 说明折叠（前台复用后台的折叠样式） */
.foot-note{word-break:keep-all;overflow-wrap:break-word}

/* ---------- 订阅版页 ---------- */
.sub-bal{display:flex;align-items:center;gap:10px;padding:12px 13px}
.sub-bal .sb-l{flex:1;min-width:0}
.sub-bal .sb-v{font-size:21px;font-weight:800;color:var(--acc);line-height:1.15}
.sub-bal .sb-k{font-size:11.5px;color:var(--dim2);margin-top:2px}
.sub-bal .sb-r{flex:none;font-size:12.5px;font-weight:700;color:#fff;padding:7px 14px;border-radius:999px;
  background:linear-gradient(135deg,#46587f,#61749d)}
/* 选择行：机器人 / 套餐 */
.pick-row{display:flex;align-items:center;gap:9px;padding:10px 4px;cursor:pointer;
  border-top:1px solid rgba(255,255,255,.5)}
.pick-row:first-child{border-top:none}
.pick-row .rd{width:17px;height:17px;border-radius:50%;border:2px solid var(--line2);flex:none;position:relative}
.pick-row.on .rd{border-color:var(--acc)}
.pick-row.on .rd::after{content:'';position:absolute;left:50%;top:50%;width:9px;height:9px;
  margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--acc)}
.pick-row .pk-mid{flex:1;min-width:0}
.pick-row .pk-nm{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick-row .pk-sub{font-size:11px;color:var(--dim2);margin-top:2px}
.pick-row .pk-sub.ok{color:#1fa971}
/* 套餐格子：一行三个 */
#planPick{display:flex;flex-wrap:wrap;gap:8px}
.plan{flex:1;min-width:92px;text-align:center;padding:11px 6px;border-radius:16px;cursor:pointer}
.plan .pl-d{font-size:14px;font-weight:700}
.plan .pl-y{font-size:11.5px;color:var(--dim2);margin-top:3px}
.plan.on{border-color:transparent;color:#fff;background:linear-gradient(135deg,#46587f,#61749d);
  box-shadow:0 4px 12px rgba(196,139,255,.28)}
.plan.on .pl-y{color:rgba(255,255,255,.92)}
/* 说明 */
.sub-note{padding:12px 13px}
.sn-h{font-size:12.5px;font-weight:700;margin-bottom:6px}
.sn-line{font-size:12.5px;line-height:1.85;word-break:break-word}
.btn.big{width:100%;padding:13px 0;font-size:14.5px}
.ub-empty{font-size:12.5px;color:var(--dim2);text-align:center;padding:12px 0}

/* ---------- 搜索框 / 空态 ---------- */
.srch{width:100%;margin:8px 0 0;padding:10px 13px;border-radius:999px;
  border:1px solid var(--glass-line);
  background:rgba(255,255,255,.52);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-size:13.5px;font-family:inherit;color:var(--txt)}
.srch::placeholder{color:var(--dim2)}
.srch:focus{outline:none;border-color:var(--acc)}
.srch-empty{text-align:center;padding:16px 10px;font-size:12.5px;color:var(--dim2);line-height:1.8}
.srch-empty span{font-size:11.5px;opacity:.8}
/* 订阅页：套餐选择标签 */
.sub-pick{display:flex;align-items:center;gap:10px;padding:12px 13px}
.sub-pick .sp-l{flex:1;min-width:0}
.sub-pick .sp-v{font-size:15px;font-weight:700}
.sub-pick .sp-k{font-size:11.5px;color:var(--dim2);margin-top:2px}
.sub-pick .sp-btn{flex:none;font-size:12.5px;font-weight:700;color:#fff;padding:8px 17px;border-radius:999px;
  border:none;cursor:pointer;font-family:inherit;background:linear-gradient(135deg,#46587f,#61749d);
  box-shadow:0 4px 12px rgba(70,88,127,.26),inset 0 1px 0 rgba(255,255,255,.35)}
.sub-pick .sp-btn:active{transform:scale(.96)}

/* ---------- 节点健康评分标签 ---------- */
.tag.xs.h-good{background:#e6f9ef;color:#1a8f55;border-color:#bfe9d2}
.tag.xs.h-warn{background:#fff3e0;color:#b57310;border-color:#f3d9ae}
.tag.xs.h-bad{background:#ffe8ec;color:#d0345c;border-color:#f8c3ce}
/* ---------- 帮助中心 ---------- */
.help-quick{padding:12px 13px}
.hq-row{display:flex;gap:10px;align-items:flex-start;padding:7px 0}
.hq-row + .hq-row{border-top:1px dashed rgba(255,255,255,.5)}
.hq-n{flex:none;width:19px;height:19px;border-radius:50%;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,#46587f,#61749d);margin-top:1px}
.hq-row div{font-size:13px;line-height:1.75;color:var(--txt);min-width:0}
.hq-row span{font-size:12.3px;color:var(--dim2)}
.help-body{font-size:13px;line-height:1.85;color:var(--txt);word-break:break-word}

/* 通用玻璃面：所有卡片/面板共用，保证风格统一 */
/*
 * 注意：.quota-card（添加机器人的额度卡）和 .wr-all-ok（健康全绿）**不能**放进这个列表！
 * 它们各自有彩色渐变背景 + 白色文字，一旦被这里的 background:var(--glass)
 * 覆盖成半透明白玻璃，白字落在白底上就完全看不见了（就是「字消失了」的 bug）。
 * 玻璃只适用于「深色文字 + 半透明底」的卡片。
 */
.glass,.card,.bot,.node-card,.user-card,.auth-box,.modal-box,.stat-card,.ov-card,
.quick-btn,.feat-btn,.info-list,.idx-ov,.mine-hero,.mine-hd,.acc,
.pick-card,.seg,.tabs,.filter-bar,.pill,.qrwrap,.capt,.code-box,.nopt,
.plan,.warn-row,.pay-amt button,.pay-way button,.stat-grid>*,.sub-pick{
  /* 先给实色兜底，再用变量覆盖：极端环境下不会变成全透明 */
  background:rgba(255,255,255,.60);
  background:var(--glass);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.78);
  border:1px solid var(--glass-line);
  box-shadow:0 4px 16px rgba(110,130,175,.10),inset 0 1px 0 rgba(255,255,255,.85);
  box-shadow:var(--sh),inset 0 1px 0 rgba(255,255,255,.85);
}

/* 自带彩色渐变的卡片：显式重申背景，防止被任何通用规则覆盖回去 */
.quota-card{background:linear-gradient(135deg,#46587f 0%,#5a6d95 55%,#6f83ab 100%);color:#fff}
.wr-all-ok{background:linear-gradient(160deg,rgba(244,251,246,.92),rgba(238,252,242,.88))}

/* ==================== 液态玻璃 · 细节增强 ==================== */

/* 玻璃卡片顶部的柔光：让平面看起来有厚度（液态感的关键） */
.card::before,.bot::before,.node-card::before,.user-card::before,.auth-box::before,
.modal-box::before,.stat-card::before,.ov-card::before,.acc::before,.idx-ov::before,
.info-list::before,.mine-hero::before,.mine-hd::before{
  content:'';position:absolute;left:0;right:0;top:0;height:55%;
  border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0));
  z-index:0;
}
.card,.bot,.node-card,.user-card,.auth-box,.modal-box,.stat-card,.ov-card,.acc,
.idx-ov,.info-list,.mine-hero,.mine-hd{position:relative}
/*
 * 把内容抬到柔光层之上（::before 是 z-index:0 的定位元素，默认会盖住普通内容）。
 * 注意：这里只能给「本来就是静态定位」的子元素加 position:relative。
 * 绝对定位的子元素（如机器人卡片右上角的 .sub-tag、二维码的 .mask）
 * 会被 position:relative 覆盖掉，从右上角掉进正常流里跑到头像上面 ——
 * 所以必须用 :not() 把它们排除掉。
 */
.card>*,.bot>*,.node-card>*,.user-card>*,.auth-box>*,.modal-box>*,.stat-card>*,
.ov-card>*,.acc>*,.idx-ov>*,.info-list>*,.mine-hero>*,.mine-hd>*{z-index:1}
.card>*:not(.sub-tag):not(.mask),
.bot>*:not(.sub-tag):not(.mask),
.node-card>*:not(.sub-tag),.user-card>*:not(.sub-tag),
.auth-box>*:not(.mask),.modal-box>*:not(.mask),
.stat-card>*,.ov-card>*,.acc>*,.idx-ov>*,.info-list>*,
.mine-hero>*,.mine-hd>*{position:relative}
/* 绝对定位的元素回到它们原本的位置（右上角 / 铺满） */
.bot>.sub-tag,.card>.sub-tag,.node-card>.sub-tag,.user-card>.sub-tag{position:absolute;z-index:3}
.qrwrap>.mask,.auth-box>.mask,.modal-box>.mask{position:absolute;z-index:3}

/* 弹窗不套高光（它自己有动画和阴影，再叠一层会显脏） */
.modal-box::before{display:none}

/* 主按钮渐变：加一点液态流动 */
.btn:not(.ghost):not(.dg):not([disabled]),.fab,.add-btn,.sub-pick .sp-btn,.pk-btn{
  background-size:200% 200%;
  animation:gradFlow 7s ease infinite;
}
@keyframes gradFlow{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@media (prefers-reduced-motion:reduce){
  .btn:not(.ghost),.fab,.add-btn,.sub-pick .sp-btn,.pk-btn{animation:none}
}

/* 头像 / 图标位：玻璃圆片 */
.bot .av,.mine-av,.mine-av-t,.mine-hero .mh-av,.mine-hero .mh-av-t,.me-av,.me-av-t,
.ub-av,.logo,.auth-h .lg{
  box-shadow:0 3px 10px rgba(110,130,175,.16),inset 0 1px 0 rgba(255,255,255,.7);
}

/* 弹窗里的小按钮不要撑满 */
.modal-box .row{gap:9px;flex:none;padding-top:11px;margin-top:11px;
  border-top:1px solid rgba(110,130,175,.12)}

/* 滚动条：细一点，配合玻璃 */
.modal-box::-webkit-scrollbar,.modal-pane::-webkit-scrollbar,.np-list::-webkit-scrollbar{width:5px}
.modal-box::-webkit-scrollbar-thumb,.modal-pane::-webkit-scrollbar-thumb,
.np-list::-webkit-scrollbar-thumb{background:rgba(140,150,180,.28);border-radius:3px}

/* 选中态：描边发光而不是实心底 */
.pay-amt button.on,.pay-way button.on,.nopt.sel,.srch:focus{
  box-shadow:0 0 0 3px rgba(70,88,127,.16),inset 0 1px 0 rgba(255,255,255,.8);
}
.filter-bar .fb.on{background:rgba(255,255,255,.85);
  box-shadow:0 2px 8px rgba(70,88,127,.16),inset 0 1px 0 rgba(255,255,255,.85)}
.plan.on{box-shadow:0 6px 16px rgba(70,88,127,.26),inset 0 1px 0 rgba(255,255,255,.4)}
.sub-tag.on{box-shadow:0 3px 10px rgba(47,143,107,.28),inset 0 1px 0 rgba(255,255,255,.4)}

/* 不支持 backdrop-filter 的浏览器：退回接近实心的白，保证文字可读 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--glass:rgba(255,255,255,.88);--glass-2:rgba(255,255,255,.82);
        --glass-line:rgba(230,235,245,.9);--glass-line2:rgba(225,231,242,.9)}
  .top,.nav-bar{background:rgba(255,255,255,.96)}
}

/* 嵌套玻璃降级：
 * 弹窗 / 折叠面板内部的卡片不再叠加模糊——
 * 一是嵌套 backdrop-filter 在手机上很吃性能（逐层回采样），
 * 二是内层模糊的是外层的玻璃面，叠起来会糊成一团看不清字。
 * 改成提高不透明度的实色玻璃，观感一致但渲染便宜得多。 */
.modal-box .card,.modal-box .node-card,.modal-box .user-card,
.modal-box .stat-card,.modal-box .ov-card,
.acc-b .card,.acc-b .node-card,.acc-b .user-card,
.bot .node-card,.card .card,.card .node-card,.card .user-card{
  -webkit-backdrop-filter:none;backdrop-filter:none;
  background:rgba(255,255,255,.74);
}
/* 弹窗内的输入框也要看得清 */
.modal-box input,.modal-box select,.modal-box textarea{
  background:rgba(255,255,255,.72);
}

/* ==================================================================
 * PC / 大屏适配
 *
 * 原来整站是纯移动端设计：容器写死 560px，
 * 在电脑上就是中间一小条、左右两大片空白。
 * 这里做三件事：
 *   1) 容器按屏幕放开（920 → 1160），正文区不再挤在中间
 *   2) 机器人 / 节点 / 用户卡片改成多列网格，宽屏一排能放 2~3 个
 *   3) 底栏从「通栏贴底」改成「居中悬浮胶囊」，登录页改成左右双栏
 *
 * 全部写在文件末尾，靠层叠顺序覆盖前面的移动端规则，
 * 手机端（<820px）完全不受影响。
 * ================================================================== */

/* ---------- 中等屏：平板横屏 / 小笔记本 ---------- */
@media(min-width:820px){
  body{font-size:15px}
  .wrap{max-width:920px;padding:0 22px}
  .top-in{max-width:920px;padding:12px 22px}
  .card{padding:17px}
  .bot{padding:16px;padding-top:34px}
  .sec-h{margin:20px 2px 10px}

  /* 机器人列表：两列。align-items:start 让高矮不同的卡片顶部对齐 */
  #botList{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;align-items:start}
  #botList>.bot{margin-top:0}
  /* 空状态跨满整行，不然会挤在左半边 */
  #botList>.empty{grid-column:1/-1}

  /* 后台：概览卡 3 列 → 4 列，统计卡 2 列 → 3 列 */
  .ov-grid{grid-template-columns:repeat(4,1fr);gap:9px}
  .stat-grid{grid-template-columns:repeat(3,1fr)}

  /* 后台节点 / 用户列表也排成两列（原来是竖着一条，电脑上右边全空） */
  #nodeList,#userList{display:grid;grid-template-columns:repeat(2,1fr);
    gap:10px;align-items:start}
  #nodeList>.node-card,#userList>.user-card{margin-bottom:0}
  #nodeList>*:not(.node-card),#userList>*:not(.user-card){grid-column:1/-1}

  /* 任务型页面（添加机器人）保持聚焦宽度，别把二维码拉成一张大饼 */
  .wrap.wrap-narrow{max-width:720px}

  /* 底栏：居中悬浮胶囊。
   * 通栏底栏在 1920px 上四个图标要横跨整屏，手指/鼠标行程极长，
   * 而且和页面左右两片留白割裂。收成胶囊后视觉上也更像个「dock」。 */
  .nav-bar{left:50%;right:auto;transform:translateX(-50%);
    bottom:16px;width:auto;border-radius:999px;
    border:1px solid var(--glass-line);padding:0 8px;
    box-shadow:0 10px 30px rgba(110,130,175,.20)}
  .nav-item{flex:none;width:98px;padding:9px 0 7px;gap:3px}
  body.has-nav{padding-bottom:88px}

  /* 弹窗放宽：330px 在电脑上是「一条」，表单挤得难受 */
  .modal-box{max-width:460px}
  .modal-box.sheet{max-width:500px}

  /* 二维码在电脑上给大一点，扫起来更稳 */
  .qrwrap{max-width:250px}

  /*
   * 登录页：左右双栏（左侧品牌面板 + 右侧表单）。
   * ★ 只作用在 .auth-split 上——后台登录页 whzjz.html 也用 .auth，
   *   但它没有左侧面板，套了双栏就会只剩左半边、右边空一大块。
   */
  .auth.auth-split{max-width:900px;margin:6vh auto 0;padding:0 22px;
    display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
  .auth-split .auth-side{display:flex}
  .auth-split .auth-box{border-radius:0 26px 26px 0;padding:30px 28px}
  /* 左侧已经有大 Logo 和标题了，右侧小圆标重复，藏掉 */
  .auth-split .auth-h .lg{display:none}
  .auth-split .auth-h{margin-bottom:20px}
  /* 后台登录页（单栏）在电脑上稍微放宽一点，别还是一条 */
  .auth:not(.auth-split){max-width:420px;margin:8vh auto 0}
}

/* ---------- 大屏：桌面显示器 ---------- */
@media(min-width:1180px){
  .wrap{max-width:1160px}
  .top-in{max-width:1160px}

  /* 一排三个机器人卡片 */
  #botList{grid-template-columns:repeat(3,1fr);gap:13px}

  /* 后台概览六张卡一行刚好排满 */
  .ov-grid{grid-template-columns:repeat(6,1fr)}
  .stat-grid{grid-template-columns:repeat(4,1fr)}
  #nodeList,#userList{grid-template-columns:repeat(3,1fr)}

  /* 概览数字在宽屏上太小气，放大一档 */
  .idx-ov .cv{font-size:21px}
  .idx-ov .ck{font-size:11px}
  .idx-ov .cell{padding:13px 4px}
}

/* ---------- 登录页左侧品牌面板 ----------
 * 移动端隐藏（.auth-side 默认 display:none），
 * 只在 ≥820px 显示，纯装饰，不影响任何交互。 */
.auth-side{display:none;position:relative;overflow:hidden;
  border-radius:26px 0 0 26px;padding:34px 30px;
  color:#fff;flex-direction:column;justify-content:center;
  background:linear-gradient(150deg,#46587f 0%,#5a6d97 45%,#7b8ab8 100%);
  box-shadow:0 18px 44px rgba(70,88,127,.28)}
/* 面板上的两团柔光，跟站点的玻璃质感呼应 */
.auth-side::before{content:'';position:absolute;inset:-30%;pointer-events:none;
  background:radial-gradient(40% 30% at 20% 15%,rgba(255,255,255,.30),transparent 62%),
             radial-gradient(46% 34% at 85% 88%,rgba(160,200,255,.34),transparent 64%);
  filter:blur(18px)}
.auth-side>*{position:relative;z-index:1}
.auth-side .as-logo{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;
  background:rgba(255,255,255,.20);border:1px solid rgba(255,255,255,.34);
  box-shadow:0 6px 18px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.5);margin-bottom:16px}
.auth-side .as-logo img{width:40px;height:40px;border-radius:11px;object-fit:contain}
.auth-side .as-tt{font-size:23px;font-weight:800;letter-spacing:.4px;line-height:1.3}
.auth-side .as-sub{font-size:13px;opacity:.86;margin-top:7px;line-height:1.7}
.auth-side .as-list{list-style:none;margin:22px 0 0;padding:0}
.auth-side .as-list li{display:flex;align-items:flex-start;gap:9px;
  font-size:13px;line-height:1.6;opacity:.94;margin-top:11px}
.auth-side .as-list .dot{width:18px;height:18px;border-radius:50%;flex:none;margin-top:2px;
  display:grid;place-items:center;background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.30);font-size:10px;font-weight:700}