:root{
  --bg:#f5f6f8; --card:#ffffff; --line:#e6e8eb; --line2:#eef0f2;
  --tx:#1f2328; --tx2:#656d76; --tx3:#8b949e;
  --brand:#2f6fed; --brand-d:#2456c9; --brand-l:#eaf1fe;
  --red:#e5484d; --green:#1a9e5c; --amber:#b7791f;
  --radius:12px; --radius-s:8px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--tx);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--brand);text-decoration:none}
.wrap{max-width:960px;margin:0 auto;padding:0 20px}

/* ---------- 登录 ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{
  width:100%;max-width:380px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:32px 28px;
}
.login-logo{display:flex;align-items:center;gap:10px;margin-bottom:24px}
.login-logo .dot{width:32px;height:32px;border-radius:9px;background:var(--brand);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:15px}
.login-logo .nm{font-size:16px;font-weight:600}
.login-card h1{font-size:17px;font-weight:600;margin:0 0 4px}
.login-card .sub{color:var(--tx2);font-size:13px;margin:0 0 22px}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;color:var(--tx2);margin-bottom:6px}
.field input{
  width:100%;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-s);
  font-size:14px;color:var(--tx);background:#fff;outline:none;transition:border .15s,box-shadow .15s;
}
.field input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-l)}
.btn{
  width:100%;height:40px;border:0;border-radius:var(--radius-s);background:var(--brand);color:#fff;
  font-size:14px;font-weight:500;cursor:pointer;transition:background .15s;
}
.btn:hover{background:var(--brand-d)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.msg{font-size:13px;color:var(--red);min-height:20px;margin:10px 0 0;text-align:center}
.msg.ok{color:var(--green)}

/* ---------- 顶栏 ---------- */
.top{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.top .wrap{height:56px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px}
.brand .dot{width:28px;height:28px;border-radius:8px;background:var(--brand);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:600}
.userbox{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--tx2)}
.userbox .un{color:var(--tx);font-weight:500}
.linkbtn{background:none;border:1px solid var(--line);border-radius:var(--radius-s);padding:5px 12px;font-size:13px;color:var(--tx2);cursor:pointer}
.linkbtn:hover{border-color:var(--tx3);color:var(--tx)}

/* ---------- 主体 ---------- */
main{padding:22px 0 60px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.stat .label{font-size:13px;color:var(--tx2);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.stat .num{font-size:26px;font-weight:600;letter-spacing:-.3px}
.stat .num.small{font-size:22px}
.stat .note{font-size:12px;color:var(--tx3);margin-top:6px}
.stat.hl{background:linear-gradient(180deg,#f7faff,#fff);border-color:#dbe7fb}
.stat.hl .num{color:var(--brand)}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:16px;overflow:hidden}
.card-hd{padding:14px 20px;border-bottom:1px solid var(--line2);display:flex;align-items:center;justify-content:space-between}
.card-hd h2{font-size:14px;font-weight:600;margin:0}
.card-hd .hint{font-size:12px;color:var(--tx3)}
.card-bd{padding:6px 0}

.invite{padding:16px 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.invite .code{
  flex:1;min-width:220px;height:38px;display:flex;align-items:center;padding:0 14px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-s);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--tx2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.copy{background:var(--brand);color:#fff;border:0;height:38px;padding:0 18px;border-radius:var(--radius-s);font-size:13px;font-weight:500;cursor:pointer}
.copy:hover{background:var(--brand-d)}

table{width:100%;border-collapse:collapse}
th,td{padding:11px 20px;text-align:left;font-size:13px;border-bottom:1px solid var(--line2)}
th{color:var(--tx2);font-weight:500;background:#fafbfc;font-size:12px;letter-spacing:.2px}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--tx2)}
.empty{padding:34px 20px;text-align:center;color:var(--tx3);font-size:13px}
.badge{display:inline-block;padding:1px 8px;border-radius:20px;font-size:12px}

.loading{padding:40px;text-align:center;color:var(--tx3);font-size:13px}
.skel{background:linear-gradient(90deg,#eef0f2 25%,#f6f7f9 37%,#eef0f2 63%);background-size:400% 100%;animation:sk 1.3s ease infinite;border-radius:6px}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}

.foot{text-align:center;color:var(--tx3);font-size:12px;padding:8px 0 0}
@media(max-width:620px){
  .stats{grid-template-columns:1fr}
  th,td{padding:10px 14px}
  .hide-sm{display:none}
}