/* 账户中心统一 stylesheet（配色与门户保持一致） */
/* 主题系统：默认「墨蓝」（介于深浅之间的中调），另有 雾蓝 / 松青 / 清风（原浅色）。
   页面 <head> 里的早执行脚本会在渲染前从 localStorage 恢复上次选择，
   右下角的 theme.js 调色板按钮负责切换。
   ⚠️ 改主题色值时：四个块要一起看；新增主题要同步 theme.js 的 THEMES 列表。 */
:root,
html[data-theme="ink"]{
  --bg:#242e40; --bg2:#33415e;
  --card:#2d3a52; --bd:#3c4a66; --bd2:#4d5e80;
  --tx:#e8edf7; --tx2:#b3bdd2; --tx3:#8590a8;
  --ac:#6b9bff; --ac2:#8fb4ff; --ac-soft:rgba(107,155,255,.16);
  --ok:#34d399; --warn:#fbbf24; --bad:#f87171;
  --sh:0 1px 2px rgba(0,0,0,.25), 0 10px 26px -18px rgba(0,0,0,.55);
  --r:16px;
}
html[data-theme="mist"]{
  --bg:#dfe6f1; --bg2:#c9d7ec;
  --card:#eff3fa; --bd:#c6d1e3; --bd2:#a9b9d2;
  --tx:#253044; --tx2:#4d5a72; --tx3:#77839b;
  --ac:#3a6fd0; --ac2:#5f8fe4; --ac-soft:rgba(58,111,208,.12);
  --ok:#16a34a; --warn:#d97706; --bad:#dc2626;
  --sh:0 1px 2px rgba(19,32,62,.04), 0 10px 26px -18px rgba(19,32,62,.20);
}
html[data-theme="pine"]{
  --bg:#20302c; --bg2:#2c423b;
  --card:#283c36; --bd:#38514a; --bd2:#4a685f;
  --tx:#e6f0ec; --tx2:#adc3bb; --tx3:#7f968e;
  --ac:#3fa98c; --ac2:#66c6a9; --ac-soft:rgba(63,169,140,.16);
  --ok:#34d399; --warn:#fbbf24; --bad:#f87171;
  --sh:0 1px 2px rgba(0,0,0,.25), 0 10px 26px -18px rgba(0,0,0,.55);
}
html[data-theme="day"]{
  --bg:#f5f7fb; --bg2:#e6eefb;
  --card:#ffffff; --bd:#e6eaf2; --bd2:#cfd8e8;
  --tx:#1b2233; --tx2:#5b6478; --tx3:#8d94a8;
  --ac:#2f6bd8; --ac2:#4a8cf5; --ac-soft:rgba(47,107,216,.10);
  --ok:#16a34a; --warn:#d97706; --bad:#dc2626;
  --sh:0 1px 2px rgba(19,32,62,.04), 0 10px 26px -18px rgba(19,32,62,.20);
}
/* 炭黑 / 紫罗兰（2026-10-12 第 10 轮反馈③新增，全站统一口径） */
html[data-theme="charcoal"]{
  --bg:#17191d; --bg2:#22252b;
  --card:#1e2126; --bd:#2e323a; --bd2:#40454f;
  --tx:#e9ebee; --tx2:#b0b6bf; --tx3:#828996;
  --ac:#4c8dff; --ac2:#79aaff; --ac-soft:rgba(76,141,255,.15);
  --ok:#34d399; --warn:#fbbf24; --bad:#f87171;
  --sh:0 1px 2px rgba(0,0,0,.35), 0 10px 26px -18px rgba(0,0,0,.65);
}
html[data-theme="violet"]{
  --bg:#1c1830; --bg2:#292349;
  --card:#241f3e; --bd:#37305e; --bd2:#4a4178;
  --tx:#ece9f8; --tx2:#b9b2da; --tx3:#8f88b0;
  --ac:#8b5cf6; --ac2:#ab8bfa; --ac-soft:rgba(139,92,246,.16);
  --ok:#34d399; --warn:#fbbf24; --bad:#f87171;
  --sh:0 1px 2px rgba(0,0,0,.3), 0 10px 26px -18px rgba(0,0,0,.6);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  min-height:100vh;background:var(--bg);color:var(--tx);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1100px 460px at 50% -220px, var(--bg2) 0%, transparent 72%);
  background-repeat:no-repeat;
}
.wrap{max-width:860px;margin:0 auto;padding:36px 18px 72px}
@media (max-width:640px){ .wrap{padding:22px 14px 60px} }

.hero{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.logo{
  width:42px;height:42px;flex:none;border-radius:12px;background:var(--ac);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:600;
  box-shadow:0 6px 18px -8px var(--ac);
}
.hero h1{font-size:19px;margin:0;font-weight:650;letter-spacing:.4px}
.hero .sub{margin:3px 0 0;font-size:12px;color:var(--tx3);letter-spacing:.3px}
.hero .right{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.card{
  background:var(--card);border:1px solid var(--bd);border-radius:var(--r);
  box-shadow:var(--sh);padding:18px;margin-bottom:16px;
}
.card h2{font-size:15px;margin:0 0 14px;font-weight:600;display:flex;align-items:center;gap:8px}
.card h2 .tip{font-size:12px;color:var(--tx3);font-weight:400}

label{display:block;font-size:12.5px;color:var(--tx2);margin:0 0 6px}
input,select,textarea{
  width:100%;padding:10px 12px;font-size:14px;color:var(--tx);
  background:var(--bg);border:1px solid var(--bd2);border-radius:10px;outline:none;
  font-family:inherit;
}
input:focus,select:focus,textarea:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-soft)}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>*{flex:1;min-width:120px}
.field{margin-bottom:12px}

button{
  font-family:inherit;font-size:14px;padding:10px 16px;border-radius:10px;cursor:pointer;
  border:1px solid transparent;background:var(--ac);color:#fff;font-weight:500;
}
button:hover{filter:brightness(1.06)}
button:disabled{opacity:.55;cursor:not-allowed}
.btn-ghost{background:transparent;border:1px solid var(--bd2);color:var(--tx2)}
.btn-danger{background:transparent;border:1px solid var(--bad);color:var(--bad)}
.btn-sm{padding:6px 10px;font-size:12.5px;border-radius:8px}

table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:8px 7px;border-bottom:1px solid var(--bd);vertical-align:middle}
th{font-size:12px;color:var(--tx3);font-weight:500;white-space:nowrap}
tr:last-child td{border-bottom:none}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- 长名字排版（2026-10-15 第 16 轮反馈②） ----------
   名字列一律 ellipsis 截断、全名放 title，配合 id 恒占一行的宽度。
   以前 30 个字的账号名把整个表格撑出横向滚动条，所有列跟着遭殃；
   截断后表格宽度恒定，完整名字悬停可见。 */
.ellip{
  display:inline-block;max-width:180px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;
}
/* 表格单元里的名字+id+按钮锁一行：不让 🔍 被挤到第二行（反馈①截图的问题） */
.nowrap-cell{white-space:nowrap}
/* 数字/时间列禁止折行（第 17 轮反馈④）：长名字把列挤窄后，
   余额「0 / 10」曾被竖着排成三行 —— 数字列宽度只够一行，永远不许折。 */
.num-cell{white-space:nowrap}
/* 账号ID列（第 18 轮反馈①）：从「名字 #id」混排里独立出来的真身列。
   等宽字体 + 弱化色，宽度恒定（id 位数再多也不影响别的列），一眼扫对齐。
   显示纯数字、不带 # 前缀（第 19 轮反馈②）—— # 没有实际作用。 */
.id-cell{
  white-space:nowrap;font-size:12px;color:var(--tx3);
  font-variant-numeric:tabular-nums;
}

/* ---------- 记录页横向滚动时账号列固定（第 18 轮反馈②） ----------
   列多必然出横向滚动条，但「这是谁的一条记录」必须始终可见 ——
   滚到最右看备注时左边的账号列跟着滚走，等于每行都要重新猜是谁。
   position:sticky 左固定：列内容照常参与布局，滚动时账号列钉在原地。
   背景必须用实色（--card），半透明会让底下滚过的列透出来。 */
.tbl-wrap.sticky-first{overflow-x:auto}
.sticky-first th:first-child,
.sticky-first td:first-child{
  position:sticky;left:0;z-index:2;
  background:var(--card,#fff);
  box-shadow:inset -1px 0 0 var(--bd);   /* 滚动时与右侧内容的分隔线 */
}

/* ---------- 行内快捷筛选小按钮（第 17 轮反馈③重新设计） ----------
   以前直接用 btn-sm btn-ghost 装 emoji 🔍：按钮 30px 高、emoji 又比文字大一号，
   把整行行高撑起来，名字和 id 跟着歪。改成 18px 见方的迷你图标钮：
   无边框无底色（hover 才现底），内置 SVG 放大镜跟主题色走 ——
   视觉上只是名字的一个小尾巴，不再是一个"按钮"。 */
.qbtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;padding:0;margin-left:3px;vertical-align:-3px;
  border:none;background:transparent;border-radius:5px;
  color:var(--tx3);cursor:pointer;line-height:1;
}
.qbtn svg{display:block}
.qbtn:hover{background:var(--ac-soft);color:var(--ac)}
/* 抽屉标题带长账号名时同样截断，别把「关闭」按钮顶出抽屉 */
.ellip-title{
  display:inline-block;max-width:60%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;
}
/* ---------- 档案「曾用账号」迷你表（第 19 轮反馈①） ----------
   以前一行塞「时间 名字 → 名字（操作：xxx）」，操作人一长就在半截断行，
   每行折得参差不齐。改成 时间/改动/操作人 三列各归各列：
   同列对齐、一格一行绝不折；长名字 ellip 截断、全名悬停可见、点击可复制。 */
.hist-head{font-size:12px;color:var(--tx3);margin:10px 0 2px}
.hist-sec table td{white-space:nowrap;vertical-align:top}
.hist-sec table td:first-child{color:var(--tx3);font-size:12px;font-variant-numeric:tabular-nums}
.hist-sec .ellip{max-width:96px;vertical-align:middle}
.hist-sec td:last-child .ellip{max-width:64px}

/* ---------- 末列防挤压（第 19 轮反馈②·截图3 的排版错乱） ----------
   记录表里几乎所有列都 nowrap（数字/时间/名字），自动布局找不到地方缩，
   就把唯一能折行的末列（流水备注）挤成一列竖排「一」字 —— 行高瞬间爆炸。
   给末列一个最小宽度兜底：真挤不下就走横向滚动条（sticky 账号列照常钉住），
   绝不出现竖排文字。流水备注单独给更宽的 floor。 */
.tbl-wrap th:last-child,.tbl-wrap td:last-child{min-width:96px}
.note-cell{min-width:130px}

/* ---------- 点击复制（第 18 轮反馈③） ----------
   档案里的账号 / 账号ID点一下就进剪贴板：管理员排错要把 id 发给开发，
   手选一串字符比点一下慢得多。样式只做「暗示可点」——虚线下划线 + hover 变主题色，
   不做成按钮（它是信息，不是操作）。 */
.copyable{
  cursor:pointer;border-bottom:1px dashed var(--bd2);padding-bottom:1px;
}
.copyable:hover{color:var(--ac);border-bottom-color:var(--ac)}
/* 复制成功的瞬时反馈：文字短暂变成「已复制 ✓」，不弹横幅打断视线 */
.copy-done{color:var(--ok) !important;border-bottom-color:transparent !important}
/* 表格里的截断名字（第 19 轮反馈③）：点击即复制全名。
   平时与普通文本无异（不加常驻下划线 —— 整列名字都带虚线太吵），
   hover 才亮出虚线 + 主题色，暗示"这个可以点"。反馈同样就地变「已复制 ✓」。 */
.copyable-plain{cursor:pointer}
.copyable-plain:hover{color:var(--ac);border-bottom:1px dashed var(--bd2)}
/* 档案里的「查看全部改名记录」：按钮和条数说明一行排开，紧跟曾用账号列表 */
.rn-jump{display:flex;align-items:center;gap:8px;margin:6px 0 8px}

.tag{
  display:inline-block;padding:2px 8px;border-radius:999px;font-size:11.5px;
  background:var(--ac-soft);color:var(--ac);white-space:nowrap;
}
.tag.ok{background:rgba(16,185,129,.14);color:var(--ok)}
.tag.warn{background:rgba(245,158,11,.16);color:var(--warn)}
.tag.bad{background:rgba(239,68,68,.14);color:var(--bad)}
.tag.gray{background:rgba(154,160,180,.16);color:var(--tx2)}

/* ---------- 分区标签：把长页面切成几屏，避免数据量一大就要拉很长的滚动条 ---------- */
.tabs{
  display:flex;gap:6px;margin:14px 0 4px;padding:5px;border-radius:12px;
  background:var(--bg2);border:1px solid var(--bd);overflow-x:auto;
}
.tabs .tab{
  flex:1 0 auto;padding:9px 16px;border:none;border-radius:9px;cursor:pointer;
  background:transparent;color:var(--tx2);font-size:13.5px;font-weight:500;
  white-space:nowrap;transition:background .18s ease,color .18s ease;
}
.tabs .tab:hover{color:var(--tx);background:var(--ac-soft)}
.tabs .tab.on{background:var(--card);color:var(--tx);font-weight:600;box-shadow:var(--sh)}
.pane{display:none}
.pane.on{display:block;animation:paneIn .22s ease}
@keyframes paneIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---------- 设置分区锚点导航（2026-10-13 第 12 轮反馈①）：
   设置卡片只会越加越多，靠滚动翻找太费劲。sticky chip 一排常驻，
   点一下直达对应卡片，滚动时高亮当前区块。 ---------- */
#setNav{
  display:flex;gap:6px;flex-wrap:wrap;align-items:center;
  position:sticky;top:8px;z-index:6;margin:0 0 12px;padding:7px 9px;
  border-radius:12px;background:var(--bg2);border:1px solid var(--bd);
  box-shadow:var(--sh);
}
#setNav button{
  padding:6px 12px;border:none;border-radius:8px;cursor:pointer;
  background:transparent;color:var(--tx2);font-size:12.5px;font-weight:500;
  white-space:nowrap;transition:background .15s ease,color .15s ease;
}
#setNav button:hover{color:var(--tx);background:var(--ac-soft)}
#setNav button.on{background:var(--card);color:var(--tx);font-weight:600;box-shadow:var(--sh)}
/* 点锚点跳过去后卡片亮一下边，让"跳到哪了"一眼可见 */
.card.set-flash{animation:setFlash 1.5s ease}
@keyframes setFlash{
  0%,60%{box-shadow:0 0 0 2px var(--ac)}
  100%{box-shadow:var(--sh)}
}

/* ---------- 分页条 ---------- */
.pager{
  display:flex;align-items:center;justify-content:flex-end;gap:8px;
  margin-top:10px;font-size:12.5px;color:var(--tx3);flex-wrap:wrap;
}
.pager .pg-btn{
  padding:5px 11px;border-radius:8px;border:1px solid var(--bd);
  background:var(--bg2);color:var(--tx2);cursor:pointer;font-size:12.5px;
}
.pager .pg-btn:hover:not(:disabled){color:var(--tx);border-color:var(--ac)}
.pager .pg-btn:disabled{opacity:.4;cursor:not-allowed}
.pager select{padding:4px 6px;font-size:12.5px;border-radius:8px}

.msg{margin-top:12px;font-size:13px;min-height:18px;transition:opacity .35s ease}
.msg.err{color:var(--bad)}
.msg.ok{color:var(--ok)}
/* 身份标识（2026-09-29 反馈①）：
   超管看到的界面跟普通用户不一样（多一个管理后台、用功能区免扣费），
   不标出来，用户自己都说不清"为什么我的跟别人不一样"。
   做成一枚小徽章而不是大皇冠 —— 这是权限提示，不是身份装扮。 */
.rbadge{
  display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;
  font-size:11.5px;font-weight:600;line-height:1.5;white-space:nowrap;
  border:1px solid rgba(229,181,103,.5);background:rgba(229,181,103,.12);color:var(--gold);
}
.rbadge:before{content:'★';font-size:10px}

/* 顶部全局提示条（2026-09-29 反馈③）：
   卡片里的 .msg 长在卡片底部，功能区一多就得往下拉才能看到"已保存"，
   点了保存却毫无反应，是最容易被当成"没保存上"的一种错觉。
   现在任何 say() 都同时在屏幕顶部弹一条 —— 不管滚到哪儿都看得见。 */
.topsay{
  position:fixed;left:50%;top:14px;transform:translateX(-50%) translateY(-16px);
  z-index:9999;max-width:min(92vw,520px);padding:9px 16px;border-radius:12px;
  font-size:13px;line-height:1.6;pointer-events:none;
  opacity:0;transition:opacity .22s ease,transform .22s ease;
  background:var(--bg2);border:1px solid var(--bd);color:var(--tx);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.topsay.on{opacity:1;transform:translateX(-50%) translateY(0)}
/* 2026-10-12 反馈②：提示底必须不透明 —— 12% 透明色叠在不同皮肤上文字会看不清。
   底一律用卡面实色 var(--card)，状态感知交给边框和文字颜色（每个皮肤都保证对比）。 */
.topsay.ok{border-color:rgba(34,160,107,.75);background:var(--card);color:var(--ok)}
.topsay.err{border-color:rgba(200,90,90,.75);background:var(--card);color:var(--bad)}
.topsay b{font-weight:700}
/* 保存按钮原地反馈：点下去当场变「✓ 已保存」，不用去别处找提示（底色同样不透明） */
.btn-sm.saved,.btn-sm.saving{border-color:rgba(34,160,107,.75);color:var(--ok);background:var(--bg2)}
.btn-sm.saving{color:var(--tx3);background:var(--bg2);border-color:var(--bd);opacity:.75}

/* 保存成功后整行闪一下绿底：光靠一行文字，用户不确定到底改的是哪一行 */
@keyframes rowFlash{0%{background:transparent}25%{background:rgba(34,160,107,.16)}100%{background:transparent}}
.flash-ok{animation:rowFlash 1.1s ease-out}
.muted{color:var(--tx3);font-size:12.5px;line-height:1.7}
hr{border:none;border-top:1px solid var(--bd);margin:16px 0}

/* 我的功能区卡片 */
.apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.app{
  display:block;text-decoration:none;color:inherit;
  background:var(--card);border:1px solid var(--bd);border-radius:var(--r);
  padding:14px;box-shadow:var(--sh);transition:transform .12s, border-color .12s;
}
.app:hover{transform:translateY(-2px);border-color:var(--ac)}
.app.locked{opacity:.55}
/* 已到期的功能区：边框带红、但不降透明度 —— 里面还有存档和验真可看，不是死卡 */
.app.expired{border-color:rgba(239,68,68,.5)}
.app .acts{margin-top:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12px}
.mini{padding:5px 12px;border-radius:8px;border:1px solid var(--bd2);background:transparent;color:var(--tx2);
  font-size:12px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.mini:hover{border-color:var(--ac);color:var(--tx)}
.mini.pri{background:var(--ac);border-color:var(--ac);color:#fff}
.mini.pri:hover{color:#fff;filter:brightness(1.08)}
.mini.pri:disabled{opacity:.55;cursor:default}
.app .t{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600}
.app .d{font-size:12px;color:var(--tx3);margin:6px 0 10px;line-height:1.6;min-height:32px}
.app .m{font-size:12px;color:var(--tx2);display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* 续期申请的处理中提示（第 11 轮反馈①）：
   服务端【没有】给管理员推送通知 —— 客户提交申请后干等是等不到的。
   必须当场把管理员的联系方式递到眼前，引导主动去说一声。点号码即复制。 */
.admhint{margin-top:10px;padding:9px 11px;border:1px dashed var(--ac);border-radius:10px;
  background:var(--ac-soft, rgba(90,140,255,.08));font-size:12px;line-height:1.8;color:var(--tx2)}
.admhint b{color:var(--tx)}
.admhint .ctact{display:inline-block;padding:2px 8px;margin:0 2px;border-radius:999px;
  border:1px solid var(--bd2);background:var(--bg);color:var(--tx);
  font-size:12px;cursor:pointer;user-select:none}
.admhint .ctact:hover{border-color:var(--ac);color:var(--ac)}
.admhint .ctact.copied{border-color:var(--ok, #22a06b);color:var(--ok, #22a06b)}

/* ---------- 密码明文切换（登录页 / 改密页通用） ---------- */
.pwd-row{position:relative}
.pwd-row input{padding-right:46px}
.pwd-row .eye{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;padding:0;border:none;border-radius:8px;
  background:transparent;font-size:16px;line-height:1;
  /* 2026-10-13 第 14 轮扫描修：没钉颜色的眼睛图标被全局 button 白字规则
     染成白色，白输入框上看不见（全站对比度扫描 auth-login 六主题全中）。
     跟主题文字色走：浅色卡上是深灰、深色主题下是浅灰，两头都可见。 */
  color:var(--tx2,#5b6478);
  opacity:.55;cursor:pointer;
}
.pwd-row .eye:hover{opacity:1;background:var(--ac-soft)}

/* ---------- 管理后台：授权卡片（替代原来 9 列挤在一行的表格） ---------- */
.op-banner{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:var(--ac-soft);border:1px solid var(--bd2);border-radius:12px;
  padding:10px 14px;margin-bottom:14px;font-size:13.5px;
}
.op-banner b{font-size:15px}
.gcard{border:1px solid var(--bd);border-left:3px solid rgba(52,211,153,.75);border-radius:12px;padding:14px;margin-bottom:12px}
/* 开通 / 未开通一眼可辨（2026-10-10 第 33 轮 反馈①）：
   已开通 = 左侧绿色竖条；未开通 = 灰竖条 + 表单整体降透明度 + 头部灰色「未开通」章 */
.gcard.isoff{border-left-color:var(--bd2)}
.gcard.isoff .gform{opacity:.72}
.gcard-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.gcard-head .gt{font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:8px}
/* 授权卡片表单（2026-10-10 第 33 轮 反馈①重新设计）：
   设置页式「标签列 + 控件列」网格，标签列固定宽、控件贴自己的标签 ——
   不管说明文字多长，同一行内标签和输入框永远对得齐，彻底告别上上下下。 */
.gform{display:grid;grid-template-columns:104px minmax(0,1fr) 104px minmax(0,1fr);gap:12px 14px;align-items:start}
.gform .gl{
  font-size:12.5px;color:var(--tx2);margin:0;text-align:right;white-space:nowrap;
  line-height:39px;   /* 与单行输入框同高，标签与控件垂直居中对齐 */
}
.gform .gc{min-width:0}
.gform .gc input,.gform .gc select{margin:0}
.gform .ginline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.gform .ghint{font-size:11.5px;color:var(--tx3);margin-top:4px;line-height:1.55}
.gform .ghint .btn-sm{padding:2px 8px;font-size:11px;border-radius:6px;vertical-align:1px}
@media(max-width:700px){
  .gform{grid-template-columns:88px minmax(0,1fr)}
  .gform .gl{line-height:1.4;padding-top:9px;text-align:left}
}
.gcard-foot{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}

/* 客户列表「已开通」模块小胶囊（2026-10-10 反馈②重新设计）：
   开通多少个都自动换行排列，比一句「A · B · C」连排整齐得多 */
.mchips{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;max-width:220px}
.mchip{
  display:inline-block;padding:1.5px 8px;border-radius:999px;font-size:11px;
  background:var(--ac-soft);color:var(--ac);white-space:nowrap;
}
/* 状态列的预警标签（2026-10-10 第 33 轮 反馈⑤）：
   预警从账号列挪到状态列竖排 —— 模块归模块、状态归状态，
   「已开通」和「即将到期」再也不会挤在一起让人看不懂关系 */
/* 状态列副行（第 35 轮 反馈③）：7日活跃 / 本月新增这类统计降成小字，不再做成红胶囊 */
.ssub{font-size:11px;color:var(--tx3);margin-top:3px;line-height:1}

/* 账户中心「账号信息」信息条（2026-10-10 第 33 轮 反馈⑨）：
   只读信息用信息卡展示，不再拿灰色 disabled 输入框冒充表单 */
.acct{display:flex;gap:10px;flex-wrap:wrap}
.acct-item{
  flex:1;min-width:150px;background:var(--bg);border:1px solid var(--bd);
  border-radius:12px;padding:10px 14px 12px;
}
.acct-item .alabel{display:block;font-size:12px;color:var(--tx3);margin-bottom:4px}
.acct-item .aval{font-size:16.5px;font-weight:650;color:var(--tx);line-height:1.4;word-break:break-all}
.acct-item .aval small{font-size:12px;font-weight:400;color:var(--tx3);margin-left:2px}

/* ---------- 经营概览 KPI ---------- */
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:10px}
.kpi-item{
  background:var(--card);border:1px solid var(--bd);border-radius:12px;
  padding:12px 14px;text-align:center;
}
/* 可点击的 KPI 卡（2026-10-10 第 33 轮 反馈⑦）：点了直接看明细/筛选名单 */
.kpi-item.clickable{cursor:pointer;transition:border-color .15s ease,transform .15s ease}
.kpi-item.clickable:hover{border-color:var(--ac);transform:translateY(-2px)}
.kpi-item b{display:block;font-size:20px;font-weight:600;color:var(--tx);line-height:1.2}
.kpi-item span{display:block;margin-top:4px;font-size:12px;color:var(--tx3)}
/* 「当前在线」是会跳动的数字，加个呼吸点强调它是实时的 */
.kpi-live{position:relative;border-color:var(--ac);background:var(--ac-soft)}
.kpi-live b{color:var(--ac)}
.kpi-live span::before{
  content:"";display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;
  background:var(--ok);animation:kpiPulse 1.8s ease-in-out infinite;
}
@keyframes kpiPulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- 客户档案抽屉 ---------- */
.drawer-mask{
  position:fixed;inset:0;background:rgba(10,16,32,.45);
  opacity:0;visibility:hidden;transition:opacity .18s;z-index:60;
}
.drawer-mask.on{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(520px,94vw);
  background:var(--bg);border-left:1px solid var(--bd);
  box-shadow:-12px 0 40px -20px rgba(0,0,0,.5);
  transform:translateX(100%);transition:transform .22s ease;z-index:61;
  display:flex;flex-direction:column;
}
.drawer.on{transform:translateX(0)}
.drawer-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--bd);font-size:15px;
}
.drawer-body{padding:14px 16px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.drawer-body .sec{font-size:14px;margin:18px 0 8px;font-weight:600}
.drawer-body .sec:first-child{margin-top:4px}
.drawer-body table{margin-bottom:4px}
.kv{
  display:flex;gap:10px;justify-content:space-between;
  padding:7px 0;border-bottom:1px dashed var(--bd);font-size:13px;
}
.kv>span{color:var(--tx3);flex:0 0 auto}
.kv>div{text-align:right;word-break:break-all}

/* ---------- 弹窗（一键开户）---------- */
.modal{
  position:fixed;inset:0;background:rgba(10,16,32,.5);
  display:none;align-items:center;justify-content:center;z-index:70;padding:16px;
}
.modal.on{display:flex}
.modal-box{
  background:var(--bg);border:1px solid var(--bd);border-radius:var(--r);
  padding:18px;width:min(560px,100%);max-height:90vh;overflow-y:auto;box-shadow:var(--sh);
}
.modal-box{position:relative}   /* 右上角关闭按钮的定位基准 */
.modal-box h2{font-size:16px;margin:0 0 10px;font-weight:600;padding-right:28px}
.modal-x{
  position:absolute;top:10px;right:10px;width:30px;height:30px;line-height:1;
  border:1px solid var(--bd);border-radius:8px;background:var(--card);color:var(--tx-sub,#888);
  font-size:20px;cursor:pointer;padding:0;
}
.modal-x:hover{background:var(--hover,#eee);color:var(--tx)}
.modal-box textarea{
  width:100%;padding:10px;border:1px solid var(--bd);border-radius:10px;
  background:var(--card);color:var(--tx);font-family:inherit;font-size:13px;
  line-height:1.6;resize:vertical;margin-top:4px;
}
/* ---------- 客户列表「⋯」行内菜单 ---------- */
.row-menu{
  position:fixed;z-index:80;min-width:130px;padding:6px;
  background:var(--bg2,var(--bg));border:1px solid var(--bd);border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.25);
}
.row-menu .rm-title{font-size:12px;color:var(--tx3,#888);padding:4px 10px 6px;border-bottom:1px solid var(--bd);margin-bottom:4px}
.row-menu button{
  display:block;width:100%;text-align:left;border:none;background:none;cursor:pointer;
  padding:8px 10px;border-radius:8px;font-size:13px;color:var(--tx);
}
.row-menu button:hover{background:var(--hover,#f2f4f8)}
.row-menu button.danger{color:var(--bad,#c8585a)}
/* 授权面板模块快速跳转 chips（模块 ≥3 个才出现）。
   已开通/未开通用「颜色 + 符号」双通道区分（2026-10-10 反馈③重新设计）：
   ✓ 蓝底 = 已开通；○ 灰虚线 = 未开通。flex-wrap 自动换行，模块再多也排得下。 */
.gn-chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.gn-chips button{
  border:1px solid var(--bd);background:var(--card);color:var(--tx);cursor:pointer;
  padding:6px 12px;border-radius:999px;font-size:12.5px;line-height:1.4;
}
.gn-chips button:hover{border-color:var(--primary,#4f6ef7);color:var(--primary,#4f6ef7)}
.gn-chips button.on{background:var(--ac-soft);border-color:transparent;color:var(--ac);font-weight:600}
.gn-chips button.on:hover{color:var(--ac);border-color:var(--ac)}
.gn-chips button.off{color:var(--tx3);border-style:dashed;background:transparent}
.gn-chips button.off:hover{color:var(--tx);border-color:var(--bd2)}
.gcard.flash{outline:2px solid var(--primary,#4f6ef7);outline-offset:2px;transition:outline-color .6s ease .8s}

/* 一键开户弹窗（2026-10-10 第 33 轮 反馈①）：与授权卡片同一套「标签列+控件列」网格，
   对齐规则全后台只有一种 —— 在哪张卡里都不会再出现上上下下的输入框 */
.modal-box .gform{margin-bottom:12px}

/* ---- 一键开户弹窗：标签在上的紧凑表单（第 35 轮 反馈②）----
   左右分栏 + 右对齐标签的网格在窄弹窗里显得松散：标签和输入框之间隔着一整个空列，
   hint 又拖在下面。这里改成「小标签在上、控件占满」的两列网格，节奏更密、更好看。 */
.pvform{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin:14px 0 4px}
.pvform .pf{display:flex;flex-direction:column;gap:5px;min-width:0}
.pvform .pf>label{font-size:12px;color:var(--tx3);font-weight:500;line-height:1}
/* 2026-10-15 反馈②：.ghint 的小字号规则原本只挂在 .gform 上，
   一键开户弹窗（.pvform）里的说明文字继承不到，回落到正文 14px ——
   看着比字段标签还大，红框投诉的就是这两行。这里与 .gform 对齐。 */
.pvform .pf .ghint{margin-top:0;line-height:1.4;font-size:11.5px;color:var(--tx3)}
.pvform .pfoot{grid-column:1/-1;display:flex;gap:10px;margin-top:4px}
.pvform .pfoot button{flex:1;height:40px;font-size:14px}

/* 快捷天数 chips（2026-10-15 反馈①）：包期别再让管理员手算「今天+30天」，
   常用档位点一下填好。三个入口共用一套样式：
   一键开户弹窗（pvQDays）/ 授权卡有效期（gform 内）/ 续期天数（rnDays 旁） */
.qdays{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;align-items:center}
.qdays button{
  border:1px solid var(--bd);background:var(--card);color:var(--tx2);cursor:pointer;
  padding:2px 10px;border-radius:999px;font-size:11.5px;line-height:1.6;
}
.qdays button:hover{border-color:var(--primary,#4f6ef7);color:var(--primary,#4f6ef7)}
.qdays button.on{background:var(--ac-soft,rgba(90,140,255,.08));border-color:transparent;color:var(--ac);font-weight:600}

/* ---------- 记录页快捷定位 chips（第 34 轮反馈⑤） ---------- */
/* 快捷定位 chips：吸顶 —— 滚到再深的记录也能一键跳别的地方或回顶（第 35 轮 反馈④） */
.jump-chips{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;
  position:sticky;top:8px;z-index:30;
  background:var(--bg);padding:8px 0;border-bottom:1px solid var(--bd);
}

/* 「↑ 回顶部」长在每个记录页自己的分页条尾部（第 36 轮 反馈①）：
   不再做右下角浮动按钮 —— 会和设备上的第三方悬浮球叠在一起。
   样式沿用 .pg-btn，无需单独规则 */

.jump-chips button{
  padding:7px 14px;border:1px solid var(--bd);border-radius:999px;background:var(--card,#fff);
  color:var(--tx2);font-size:12.5px;cursor:pointer;transition:border-color .15s,color .15s;
}
.jump-chips button:hover{border-color:var(--ac);color:var(--ac)}
/* 跳转落点高亮：1.2 秒的边框呼吸，告诉人"你在这张卡" */
.card{scroll-margin-top:64px}   /* 吸顶 chips 会盖住锚点起点，留出缓冲 */
.card.flash{animation:cardFlash 1.2s ease}
@keyframes cardFlash{
  0%{box-shadow:0 0 0 2px var(--ac)}
  60%{box-shadow:0 0 0 2px var(--ac)}
  100%{box-shadow:0 0 0 0 transparent}
}

/* ================= 手机适配（第 35 轮 反馈⑤）=================
   手机使用量比 PC 还多：筛选行不再挤成一条缝，弹窗、表单、KPI 全部落回单列，
   触控目标不小于 40px。表格横向滚动由 .tbl-wrap 兜底。 */
@media (max-width:640px){
  .row{gap:8px}
  .row input,.row select{flex:1 1 140px;min-width:0}   /* 筛选行自动换行，不留 40px 宽的缝 */
  .kpis{gap:8px}
  .kpi-item{padding:10px 12px}
  .pvform{grid-template-columns:1fr;gap:10px}
  .modal-box{padding:16px 14px;width:calc(100vw - 24px)}
  .hero{flex-wrap:wrap}
  .hero h1{font-size:19px}
  .card{padding:14px 12px}
  .pager{justify-content:center}
  .tabs .tab{padding:9px 12px;font-size:13px}
  button,.btn-sm{min-height:38px}   /* 触控目标： Apple/Android 推荐 ≥ 44/48px，按钮取 38-40 平衡密度 */
  .btn-sm{min-height:34px}
}