:root{
  --pri:#2b6cff; --pri-d:#1f57d6; --pri-l:#eef3ff;
  --bg:#f0f2f5; --card:#fff; --line:#e6e9ef; --txt:#1f2937; --sub:#8a94a6;
  --ok:#12b76a; --warn:#f79009; --err:#f04438; --radius:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font:14px/1.55 -apple-system,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--txt);background:var(--bg)}
a{color:var(--pri);text-decoration:none}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit;font-size:14px;outline:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;background:var(--pri);color:#fff;border:none;
  border-radius:8px;padding:8px 16px;font-size:14px;transition:.15s}
.btn:hover{background:var(--pri-d)}
.btn.ghost{background:#fff;color:var(--txt);border:1px solid var(--line)}
.btn.ghost:hover{background:#f7f9fc;border-color:#cfd6e4}
.btn.sm{padding:5px 11px;font-size:13px;border-radius:6px}
.btn.danger{background:var(--err)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;color:var(--sub);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 12px;
  transition:.15s;background:#fff}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--pri);box-shadow:0 0 0 3px rgba(43,108,255,.1)}
.card{background:var(--card);border-radius:var(--radius);box-shadow:0 1px 3px rgba(16,24,40,.06)}
.badge{display:inline-block;background:var(--err);color:#fff;border-radius:9px;font-size:11px;line-height:18px;
  min-width:18px;height:18px;padding:0 5px;text-align:center}
.tag{display:inline-block;padding:1px 7px;border-radius:4px;font-size:12px;background:var(--pri-l);color:var(--pri)}
.muted{color:var(--sub)}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scroll{overflow-y:auto;scrollbar-width:thin}
.scroll::-webkit-scrollbar{width:6px;height:6px}
.scroll::-webkit-scrollbar-thumb{background:#cfd6e4;border-radius:3px}
.scroll::-webkit-scrollbar-track{background:transparent}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--sub);gap:8px;
  height:100%;min-height:160px;font-size:13px}
.empty .ico{font-size:38px;opacity:.35}
.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);background:rgba(31,41,55,.92);color:#fff;
  padding:10px 20px;border-radius:8px;font-size:14px;z-index:99999;opacity:0;transition:.25s;pointer-events:none}
.toast.show{opacity:1;top:28px}
.mask{position:fixed;inset:0;background:rgba(16,24,40,.45);display:none;align-items:center;justify-content:center;z-index:9000}
.mask.show{display:flex}
.modal{background:#fff;border-radius:12px;min-width:380px;max-width:92vw;max-height:88vh;overflow:auto;
  box-shadow:0 20px 60px rgba(16,24,40,.24)}
.modal .mh{padding:16px 20px;border-bottom:1px solid var(--line);font-weight:600;display:flex;justify-content:space-between;align-items:center}
.modal .mb{padding:20px}
.modal .mf{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}
.dot.online{background:var(--ok)}.dot.busy{background:var(--warn)}
.dot.away{background:#98a2b3}.dot.offline{background:#cfd6e4}
table.tb{width:100%;border-collapse:collapse;font-size:13px}
table.tb th{text-align:left;color:var(--sub);font-weight:500;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
table.tb td{padding:11px 12px;border-bottom:1px solid #f2f4f8}
table.tb tr:hover td{background:#fafbfd}