/* ============================================================
   管家婆报表通 · 授权管理后台  v4（纯白侧栏 + 蓝调协调配色）
   层次区分：页面浅灰 → 侧栏纯白 → 卡片纯白（描边+阴影）→ 弹框白（深色遮罩）
   每层不同色/不同描边，不会出现“同色叠在一起看不清”
   ============================================================ */
:root {
  --bg: #eef1f6; --panel: #fff; --panel-2: #f7f9fc;
  --line: #e3e8f0; --line-s: #edf1f7; --line-t: #cbd3df;
  --txt: #0f172a; --txt2: #475569; --txt3: #94a3b8;
  --pri: #2b6cf0; --pri-d: #1f57c9; --pri-l: #3b7bf5; --pri-w: #eff4ff; --pri-b: #d6e4ff;
  --pos: #12a150; --pos-w: #e8f8ef;
  --neg: #dc3a48; --neg-w: #fdeef0;
  --warn: #b26a00; --warn-w: #fff6e5;
  --r-s: 6px; --r: 8px; --r-l: 12px; --h: 34px;
  --sh-1: 0 1px 2px rgba(16, 24, 40, .05);
  --sh-2: 0 4px 14px rgba(16, 24, 40, .08);
  --sh-3: 0 24px 64px rgba(16, 24, 40, .26);
  --t: .16s cubic-bezier(.4, 0, .2, 1);
  --f: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Segoe UI", system-ui, sans-serif;
  --mono: "Cascadia Mono", Consolas, "Courier New", monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--txt); font: 13.5px/1.55 var(--f);
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
a { color: inherit; }
::selection { background: var(--pri-b); }
svg { width: 16px; height: 16px; flex: none; display: block; }
.mono { font-family: var(--mono); }
.dim { color: var(--txt3); font-size: 12px; }
.spacer { flex: 1; }
.ta-r { text-align: right !important; }

/* 通用控件 */
.ipt {
  height: var(--h); border: 1px solid var(--line-t); border-radius: var(--r); background: #fff;
  padding: 0 11px; color: var(--txt); transition: var(--t);
}
.ipt:focus { outline: 0; border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri-w); }
select.ipt { padding-right: 6px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: var(--h); padding: 0 15px; border: 1px solid var(--line-t); border-radius: var(--r);
  background: #fff; color: var(--txt); font-size: 13.5px; cursor: pointer; transition: var(--t); white-space: nowrap;
}
.btn:hover { border-color: #b3bdcb; background: var(--panel-2); }
.btn.primary { background: var(--pri); border-color: var(--pri); color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(43, 108, 240, .22); }
.btn.primary:hover { background: var(--pri-d); border-color: var(--pri-d); }
.btn.danger { color: var(--neg); border-color: #f0c6c9; }
.btn.danger:hover { background: var(--neg-w); border-color: var(--neg); }
.btn.sm { height: 28px; padding: 0 11px; font-size: 12.5px; }
.btn.icon { width: var(--h); padding: 0; }
.btn:disabled { opacity: .55; cursor: default; box-shadow: none; }
svg.spin { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ 登录页 ============ */
.login-wrap {
  min-height: 100%; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(1000px 520px at 20% -10%, #e6efff 0%, var(--bg) 60%);
}
.login-box {
  display: flex; width: 760px; max-width: 96vw; background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: 0 24px 60px rgba(16, 24, 40, .12); overflow: hidden;
}
.login-left {
  position: relative; width: 340px; flex: none; padding: 34px 30px;
  background: linear-gradient(160deg, #e8f1ff 0%, #f4f8ff 55%, #fbfdff 100%);
  border-right: 1px solid var(--line-s);
}
.login-left::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--pri-l);
}
.login-left .logo { width: 46px; height: 46px; margin-bottom: 16px; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .25)); }
.login-left h1 { margin: 0; font-size: 21px; letter-spacing: .5px; color: var(--txt); }
.login-slogan { margin: 5px 0 26px; font-size: 12.5px; color: var(--txt2); }
.login-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.login-feats li { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; color: var(--txt2); line-height: 1.6; }
.login-feats svg { width: 15px; height: 15px; margin-top: 2px; color: var(--pri); }
.login-right { flex: 1; padding: 40px 38px 26px; }
.login-right h2 { margin: 0; font-size: 19px; }
.login-sub { margin: 5px 0 22px; color: var(--txt3); font-size: 12.5px; }
.login-right input {
  width: 100%; height: 44px; border: 1px solid var(--line-t); border-radius: 10px;
  padding: 0 14px; font-size: 14px; transition: var(--t);
}
.login-right input:focus { outline: 0; border-color: var(--pri); box-shadow: 0 0 0 4px var(--pri-w); }
.login-right button {
  width: 100%; height: 44px; margin-top: 14px; border: 0; border-radius: 10px; cursor: pointer;
  background: linear-gradient(180deg, var(--pri-l), var(--pri)); color: #fff; font-size: 14.5px; font-weight: 600;
  letter-spacing: 2px; transition: var(--t); box-shadow: 0 2px 8px rgba(43, 108, 240, .26);
}
.login-right button:hover { filter: brightness(1.06); }
.login-right button:disabled { opacity: .6; cursor: default; }
.login-right .err { min-height: 20px; margin-top: 10px; font-size: 12.5px; color: var(--neg); }
.login-right .tip { margin: 6px 0 0; color: var(--txt3); font-size: 11.5px; line-height: 1.7; }

/* ============ 主框架 ============ */
.app { display: flex; height: 100vh; overflow: hidden; }

/* 左导航（纯白 + 蓝色选中）——与浅灰页面、白色卡片靠描边与色差区分，不会同色叠在一起 */
.nav {
  width: 216px; flex: none; background: #fff; border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.nav-brand {
  display: flex; align-items: center; gap: 10px; padding: 18px 16px 16px;
  border-bottom: 1px solid var(--line-s);
}
.nav-logo { width: 30px; height: 30px; }
.nav-title { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--txt); letter-spacing: .3px; }
.nav-sub { font-size: 11px; color: var(--txt3); }
.nav-menu { flex: 1; padding: 12px 10px; display: flex; flex-direction: column; gap: 4px; }
.nav-item {
  position: relative; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px;
  border-radius: 9px; color: var(--txt2); font-size: 13.5px; text-decoration: none; cursor: pointer; transition: var(--t);
}
.nav-item svg { color: var(--txt3); }
.nav-item:hover { background: #f2f6fd; color: var(--txt); }
.nav-item:hover svg { color: var(--pri); }
.nav-item.on {
  background: var(--pri-w); color: var(--pri); font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--pri-b);
}
.nav-item.on svg { color: var(--pri); }
.nav-item.on::before {
  content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--pri);
}
.nav-foot {
  display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-top: 1px solid var(--line-s);
  font-size: 11.5px; color: var(--txt3);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--txt3); flex: none; }
.dot.ok { background: var(--pos); box-shadow: 0 0 0 3px var(--pos-w); }
.dot.bad { background: var(--neg); box-shadow: 0 0 0 3px var(--neg-w); }

/* 内容区 */
.main { flex: 1; min-width: 0; overflow: auto; padding: 22px 26px 30px; }
.page-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 18px; }
.page-head h1 { margin: 0; font-size: 20px; letter-spacing: .3px; }
.page-sub { margin: 4px 0 0; color: var(--txt3); font-size: 12.5px; }
.page-acts { margin-left: auto; display: flex; gap: 10px; }

/* ============ 统计卡片 ============ */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.card-stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l);
  padding: 15px 16px 14px; cursor: pointer; transition: var(--t); text-align: left;
}
.card-stat:hover { box-shadow: var(--sh-2); transform: translateY(-1px); border-color: var(--line-t); }
.card-stat.on { border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri-w); }
.card-stat .cs-top { display: flex; align-items: center; gap: 8px; color: var(--txt2); font-size: 12.5px; }
.card-stat .cs-top svg { width: 27px; height: 27px; padding: 5px; border-radius: 8px; background: var(--pri-w); color: var(--pri); }
.card-stat .cs-num { margin: 8px 0 2px; font-size: 28px; font-weight: 600; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.card-stat .cs-sub { font-size: 11.5px; color: var(--txt3); }
.card-stat.k-ok .cs-top svg { background: var(--pos-w); color: var(--pos); }
.card-stat.k-soon .cs-top svg { background: var(--warn-w); color: var(--warn); }
.card-stat.k-bad .cs-top svg { background: var(--neg-w); color: var(--neg); }

/* ============ 列表面板 ============ */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--sh-1); overflow: hidden; }
.panel-bar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line-s); }
.search {
  display: flex; align-items: center; gap: 8px; height: var(--h); width: 280px; padding: 0 11px;
  border: 1px solid var(--line-t); border-radius: var(--r); background: #fff; transition: var(--t);
}
.search svg { color: var(--txt3); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 13.5px; }
.search:focus-within { border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri-w); }
.tb-wrap { overflow: auto; }

table { width: 100%; border-collapse: separate; border-spacing: 0; }
th, td { padding: 0 16px; height: 52px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line-s); }
th {
  height: 42px; background: var(--panel-2); font-size: 12.5px; color: var(--txt2); font-weight: 600;
  position: sticky; top: 0; z-index: 1;
}
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--txt); }
th .ar { display: inline-block; width: 0; height: 0; margin-left: 5px; vertical-align: 1px;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 5px solid var(--line-t); }
th.asc .ar { border-bottom-color: var(--pri); }
th.desc .ar { border-bottom: 0; border-top: 5px solid var(--pri); }
tbody tr { transition: background var(--t); }
tbody tr:hover td { background: #f7faff; }
tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--pri); }
tbody tr:last-child td { border-bottom: 0; }
td.num { font-variant-numeric: tabular-nums; }

/* 客户单元格：首字头像 */
.cust { display: flex; align-items: center; gap: 10px; }
.ava {
  width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center;
  color: #fff; font-size: 13px; font-weight: 600;
}
.cust-name { font-weight: 500; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.cust-db { font-size: 11.5px; color: var(--txt3); margin-top: 1px; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }

/* 授权码 */
.key { display: flex; align-items: center; gap: 6px; }
.key code { font-family: var(--mono); font-size: 12.5px; color: var(--txt2); letter-spacing: .3px; }
.key .cp {
  width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: var(--r-s);
  background: none; color: var(--txt3); cursor: pointer; opacity: 0; transition: var(--t);
}
tr:hover .key .cp { opacity: 1; }
.key .cp:hover { background: var(--pri-w); color: var(--pri); }
.key .cp svg { width: 14px; height: 14px; }

/* 台数进度条 */
.pcs { display: flex; align-items: center; gap: 8px; }
.pcs .bar { display: flex; gap: 2px; }
.pcs .bar i { width: 12px; height: 6px; border-radius: 3px; background: #dfe4ec; }
.pcs .bar i.on { background: var(--pri); }
.pcs.full .bar i.on { background: var(--neg); }
.pcs .n { font-size: 12.5px; color: var(--txt2); font-variant-numeric: tabular-nums; }
.pcs.full .n { color: var(--neg); font-weight: 600; }

/* 状态胶囊 */
.st { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 500; }
.st::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st.ok { color: var(--pos); background: var(--pos-w); }
.st.soon { color: var(--warn); background: var(--warn-w); }
.st.grace { color: #c2410c; background: #fff4ec; }
.st.expired, .st.blocked { color: var(--neg); background: var(--neg-w); }
.st.revoked, .st.none { color: var(--txt2); background: #f1f3f7; }
tr.row-expired td { background: #fffafb; }
tr.row-expired:hover td { background: var(--neg-w); }
tr.row-revoked td { opacity: .62; }

/* 操作列 */
/* ===== 行内操作按钮（彻底替代原 ⋯ 下拉菜单：不再有浮层，也就不会被任何容器裁剪/遮挡）===== */
.acts { display: flex; align-items: center; gap: 5px; justify-content: flex-end; }
.abtn {
  height: 28px; min-width: 28px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid var(--line-t); background: #fff; border-radius: 8px; color: var(--txt2);
  font-size: 12.5px; font-family: inherit; cursor: pointer; transition: var(--t); white-space: nowrap;
}
.abtn svg { width: 15px; height: 15px; }
.abtn:hover { border-color: var(--pri); color: var(--pri); background: var(--pri-w); }
.abtn:active { transform: translateY(1px); }
.abtn.w { padding: 0 10px; font-weight: 500; border-color: var(--pri-b); color: var(--pri); background: var(--pri-w); }
.abtn.w:hover { background: #e4efff; }
.abtn.danger:hover { border-color: #f0a5a5; color: var(--neg); background: var(--neg-w); }
.abtn.ok:hover { border-color: #86dfa5; color: #137a3a; background: #e9f9ef; }

/* 操作列固定在右侧：窗口窄时横向滚动，操作按钮始终看得见 */
td.td-acts {
  position: sticky; right: 0; z-index: 1; background: var(--panel);
  box-shadow: -10px 0 12px -10px rgba(16, 24, 40, .18);
}
tbody tr:hover td.td-acts { background: #f7faff; }
th.td-acts { position: sticky; right: 0; top: 0; z-index: 2; }
.more-wrap { position: relative; }
.menu {
  position: fixed; z-index: 200; min-width: 132px; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--sh-2); padding: 5px;
}
.menu button {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 10px; border: 0;
  border-radius: var(--r-s); background: none; color: var(--txt2); font-size: 13px; cursor: pointer; transition: var(--t); text-align: left;
}
.menu button:hover { background: var(--panel-2); color: var(--txt); }
.menu button.danger { color: var(--neg); }
.menu button.danger:hover { background: var(--neg-w); }
.menu svg { width: 15px; height: 15px; }

/* 空状态 / 骨架屏 */
.empty { padding: 56px 20px; text-align: center; }
.empty svg { width: 40px; height: 40px; margin: 0 auto 12px; color: #c8d0dc; }
.empty h3 { margin: 0 0 4px; font-size: 15px; }
.empty p { margin: 0 0 16px; color: var(--txt3); font-size: 12.5px; }
.skel { padding: 6px 16px; }
.skel-row { height: 52px; margin: 2px 0; border-radius: var(--r); background: linear-gradient(90deg, #f1f3f7 25%, #e9edf3 37%, #f1f3f7 63%); background-size: 400% 100%; animation: sk 1.3s ease infinite; }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* 分页 */
.panel-foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line-s); }
.pager { display: flex; gap: 6px; }
.pager button {
  min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid var(--line-t); border-radius: var(--r-s);
  background: #fff; color: var(--txt2); font-size: 12.5px; cursor: pointer; transition: var(--t);
}
.pager button:hover { border-color: var(--pri); color: var(--pri); }
.pager button.on { background: var(--pri); border-color: var(--pri); color: #fff; font-weight: 600; }
.pager button:disabled { opacity: .45; cursor: default; border-color: var(--line); }

/* 顶部告警条（签名密钥异常 / 写盘失败 / 密码解不开）*/
.syswarn {
  background: var(--warn-w); border: 1px solid #f3ddb5; color: #8a5200;
  border-radius: 12px; padding: 12px 16px; margin-bottom: 14px;
  display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; line-height: 1.6;
}
.sw-line { display: flex; align-items: flex-start; gap: 8px; }
.sw-line svg { width: 15px; height: 15px; margin-top: 2px; flex: none; }
.warn-ico { display: inline-block; width: 14px; height: 14px; margin-left: 5px; vertical-align: -2px; color: #e5a01a; }

/* 报表补丁：客户名后的标记 + 补丁面板里的文件清单 */
.tag-patch {
  display: inline-block; margin-left: 6px; padding: 0 7px; height: 18px; line-height: 18px;
  border-radius: 999px; font-size: 11px; font-weight: 500;
  background: var(--pri-w); color: var(--pri); vertical-align: 1px;
}
.filelist {
  background: var(--panel-2); border: 1px solid var(--line-s); border-radius: 8px;
  padding: 10px 12px; margin: 6px 0 0; font-family: var(--mono); font-size: 11.5px;
  white-space: pre-wrap; max-height: 150px; overflow: auto; color: var(--txt2); line-height: 1.7;
}
.filein { flex: 1; min-width: 0; height: var(--h); border: 1px dashed var(--line-t); border-radius: var(--r); padding: 5px 10px; background: #fff; font-size: 12.5px; cursor: pointer; }

/* ============ 系统设置页 ============ */
.set-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; align-items: start; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--sh-1); }
.card-head { display: flex; align-items: center; gap: 9px; padding: 15px 18px; border-bottom: 1px solid var(--line-s); }
.card-head svg { color: var(--pri); }
.card-head h3 { margin: 0; font-size: 14.5px; }
.card-body { padding: 18px; }
.fld { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.fld > span { flex: 0 0 76px; text-align: right; color: var(--txt2); font-size: 13px; }
.fld input { flex: 1; min-width: 0; height: var(--h); border: 1px solid var(--line-t); border-radius: var(--r); padding: 0 11px; transition: var(--t); }
.fld input:focus { outline: 0; border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri-w); }
.kv2 { display: flex; gap: 10px; min-height: 30px; font-size: 13px; }
.kv2 > span { flex: 0 0 96px; color: var(--txt3); }
.kv2 > b { font-weight: 500; color: var(--txt); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.warnbox { background: var(--warn-w); border: 1px solid #f3ddb5; color: #8a5200; border-radius: 10px; padding: 13px 15px; font-size: 12.5px; line-height: 1.75; }

/* ============ 弹框 ============ */
.mask { position: fixed; inset: 0; background: rgba(16, 24, 40, .38); backdrop-filter: blur(1px); z-index: 500; }
.dlg {
  position: fixed; left: 50%; top: 4vh; transform: translateX(-50%);
  width: 660px; max-width: 94vw; max-height: 92vh;
  background: var(--panel); border-radius: 14px; box-shadow: var(--sh-3);
  display: flex; flex-direction: column; overflow: hidden; z-index: 501; animation: pop .16s cubic-bezier(.2, .9, .3, 1.1);
}
@keyframes pop { from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.985); } }
.dlg.wide { width: 800px; max-width: 94vw; }
.dlg-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 16px; border-bottom: 1px solid var(--line-s); flex: none; }
.dlg-ico {
  width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center;
  background: var(--pri-w); color: var(--pri);
}
.dlg-ico.danger { background: var(--neg-w); color: var(--neg); }
.dlg-ico.ok { background: var(--pos-w); color: var(--pos); }
.dlg-ico svg { width: 19px; height: 19px; }
.dlg-tt { flex: 1; min-width: 0; padding-top: 1px; }
.dlg-tt h2 { margin: 0; font-size: 15.5px; }
.dlg-tt p { margin: 3px 0 0; color: var(--txt3); font-size: 12px; line-height: 1.5; }
.dlg-head .x {
  width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: var(--r-s);
  background: none; color: var(--txt3); cursor: pointer; transition: var(--t);
}
.dlg-head .x:hover { background: var(--panel-2); color: var(--txt); }
.dlg-body { padding: 18px 20px; overflow: auto; min-height: 0; }   /* min-height:0 是关键：否则内容一长就把底部按钮挤出屏幕 */
.dlg-foot { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line-s); background: var(--panel-2); flex: none; }

/* 弹框内区块 */
.sec { margin-bottom: 18px; }
.sec:last-child { margin-bottom: 0; }
.sec-t { display: flex; align-items: center; gap: 7px; margin: 0 0 12px; font-size: 12.5px; font-weight: 600; color: var(--txt2); }
.sec-t svg { width: 15px; height: 15px; color: var(--txt3); }
.sec-t::after { content: ''; flex: 1; height: 1px; background: var(--line-s); }

/* ===== 报表补丁弹框（v2 重设计：状态卡 + 两步上传 + 说明折叠）===== */
.pstat { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--pri-b); background: linear-gradient(135deg, #f3f8ff, #e9f1ff); margin-bottom: 10px; }
.pstat.none { border-color: var(--line); background: var(--panel-2); }
.pstat.rev { border-color: #f0dcb4; background: #fffaf0; }
.pstat-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pri); flex: none; box-shadow: 0 0 0 4px rgba(43, 108, 240, .14); }
.pstat.none .pstat-dot { background: var(--txt3); box-shadow: 0 0 0 4px rgba(148, 163, 184, .16); }
.pstat.rev .pstat-dot { background: #e5a01a; box-shadow: 0 0 0 4px rgba(229, 160, 26, .16); }
.pstat-l { flex: 1; min-width: 0; }
.pstat-name { font-size: 14px; font-weight: 600; color: var(--txt); }
.pstat-sub { font-size: 11.5px; color: var(--txt3); margin-top: 2px; }
.pstat-r { text-align: right; flex: none; }
.pstat-rk { font-size: 11px; color: var(--txt3); }
.pstat-rv { font-size: 20px; font-weight: 700; color: var(--pri); line-height: 1.2; font-variant-numeric: tabular-nums; }
.pstat.none .pstat-rv { color: var(--txt3); }
.pchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pchip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line-t); font-size: 12px; color: var(--txt2); font-family: var(--mono); }
.pchip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--pri); flex: none; }
.pnote { font-size: 12px; color: var(--txt2); background: var(--panel-2); border: 1px solid var(--line-s); border-radius: 8px; padding: 8px 11px; margin-bottom: 4px; }
.plabel { font-size: 12.5px; font-weight: 600; color: var(--txt2); margin: 12px 0 6px; }
.hidefile { display: none; }
.drop { border: 1.5px dashed var(--line-t); border-radius: 12px; padding: 16px 14px; text-align: center; cursor: pointer; transition: var(--t); background: #fff; }
.drop:hover { border-color: var(--pri); background: var(--pri-w); }
.drop.on { border-style: solid; border-color: #86dfa5; background: #f4fcf7; }
.drop-ico { width: 34px; height: 34px; margin: 0 auto 8px; border-radius: 10px; background: var(--pri-w); color: var(--pri); display: grid; place-items: center; }
.drop-ico.ok { background: var(--pos-w); color: var(--pos); }
.drop-ico svg { width: 18px; height: 18px; }
.drop-t { font-size: 13.5px; font-weight: 600; color: var(--txt); word-break: break-all; }
.drop-s { font-size: 11.5px; color: var(--txt3); margin-top: 3px; }
.phint-t { display: inline-block; margin-top: 12px; font-size: 12.5px; color: var(--pri); text-decoration: none; }
.phint-b { margin-top: 8px; padding: 10px 12px; background: var(--panel-2); border: 1px solid var(--line-s); border-radius: 8px; font-size: 12px; color: var(--txt2); line-height: 1.9; }
.phint-b b { font-family: var(--mono); font-weight: 500; color: var(--txt); }
.ptip { margin-top: 10px; font-size: 11.5px; color: var(--txt3); line-height: 1.7; }

/* 勾选项行（解绑弹框的“同时禁止…”）：复选框紧贴文字 */
.ckrow { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 13px; color: var(--txt2); cursor: pointer; user-select: none; }
.ckrow input { width: 16px; height: 16px; flex: none; margin: 0; cursor: pointer; }

.row { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; }
.row > label { flex: 0 0 100px; color: var(--txt2); font-size: 13px; text-align: right; }
.row .grow { flex: 1; min-width: 0; }
.row input, .row select {
  flex: 1; min-width: 0; height: var(--h); border: 1px solid var(--line-t); border-radius: var(--r);
  padding: 0 11px; transition: var(--t); background: #fff;
}
.row input:focus { outline: 0; border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri-w); }
.row2 { display: flex; gap: 14px; align-items: flex-start; }
.row2 > .row { flex: 1 1 0; min-width: 0; }
.row2 > .row > label { flex: 0 0 84px; }
.quick { display: flex; gap: 8px; margin: -4px 0 14px 84px; }
.quick a {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 1px solid var(--line-t);
  border-radius: 999px; font-size: 12px; color: var(--txt2); text-decoration: none; transition: var(--t);
}
.quick a:hover { border-color: var(--pri); color: var(--pri); background: var(--pri-w); }
.msg { min-height: 20px; font-size: 13px; margin: 0 0 6px 112px; word-break: break-all; }
.msg.ok { color: var(--pos); } .msg.err { color: var(--neg); }
.note { color: var(--txt3); font-size: 12px; line-height: 1.7; }
.hintline { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; }
.hintline .btn { flex: none; }

/* 授权码结果页 */
.done { text-align: center; padding: 6px 0 0; }
.done .ok-ico {
  width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center;
  background: var(--pos-w); color: var(--pos);
}
.done .ok-ico svg { width: 28px; height: 28px; }
.done h3 { margin: 0 0 4px; font-size: 17px; }
.done p { margin: 0 0 16px; color: var(--txt3); font-size: 12.5px; }
.keybox {
  background: var(--panel-2); border: 1px dashed var(--line-t); border-radius: 10px;
  padding: 18px; margin: 0 0 14px; font-family: var(--mono); font-size: 24px; letter-spacing: 2px;
  text-align: center; color: var(--pri-d); font-weight: 600; user-select: all;
}
.kvlist { display: flex; flex-direction: column; gap: 2px; text-align: left; margin-bottom: 14px; }
.kvlist .kv2 > span { flex: 0 0 72px; }

/* 设备卡片 */
.devs { display: flex; flex-direction: column; gap: 10px; }
.dev {
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; transition: var(--t);
  display: flex; align-items: center; gap: 14px;
}
.dev:hover { border-color: var(--line-t); box-shadow: var(--sh-1); }
.dev-ico { width: 34px; height: 34px; flex: none; border-radius: 9px; background: var(--panel-2); display: grid; place-items: center; color: var(--txt2); }
.dev-main { flex: 1; min-width: 0; }
.dev-code { font-family: var(--mono); font-size: 13px; color: var(--txt); }
.dev-meta { margin-top: 3px; font-size: 11.5px; color: var(--txt3); display: flex; gap: 14px; flex-wrap: wrap; }
.banlist { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.banlist h4 { margin: 0 0 10px; font-size: 12.5px; color: var(--txt2); }

/* Toast */
.toast {
  position: fixed; right: 24px; top: 22px; z-index: 900; display: flex; align-items: center; gap: 9px;
  background: #101828; color: #fff; padding: 11px 16px; border-radius: 10px; font-size: 13px;
  box-shadow: 0 12px 30px rgba(16, 24, 40, .3); opacity: 0; transform: translateY(-8px);
  pointer-events: none; transition: var(--t);
}
.toast.on { opacity: 1; transform: none; }
.toast svg { width: 17px; height: 17px; color: #4ade80; }
.toast.bad svg { color: #f87171; }

@media (max-width: 1080px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .nav { width: 180px; }
}