/* ══════════════════════════════════════════════════════════
   金数统一账号服务 —— Apple HIG 令牌体系
   与「金数股票信号监控台」保持同一套设计语言
   ══════════════════════════════════════════════════════════ */
:root {
  color-scheme: light;
  --bg:#F2F2F7; --panel:#FFFFFF; --panel-2:#F2F2F7;
  --fill:rgba(120,120,128,.12); --fill-strong:rgba(120,120,128,.20);
  --row-hover:#F7F7F9;
  --thead:rgba(255,255,255,.86);
  --glass:rgba(255,255,255,.72);
  --line:rgba(60,60,67,.10); --line-strong:rgba(60,60,67,.18);
  --txt:#1C1C1E; --txt-2:rgba(60,60,67,.60); --txt-3:rgba(60,60,67,.32);
  --accent:#D97706; --accent-strong:#B45309;
  --accent-tint:rgba(0,122,255,.12); --accent-ring:rgba(0,122,255,.30);
  --danger:#FF3B30; --danger-text:#D70015; --danger-tint:rgba(255,59,48,.12);
  --ok:#34C759; --ok-text:#1F8F42; --ok-tint:rgba(52,199,89,.14);
  --warn:#FF9500; --warn-tint:rgba(255,149,0,.14);
  --purple:#AF52DE; --purple-tint:rgba(175,82,222,.14);
  --sh-1:0 1px 2px rgba(0,0,0,.04),0 3px 10px rgba(0,0,0,.045);
  --sh-2:0 2px 6px rgba(0,0,0,.05),0 10px 28px rgba(0,0,0,.075);
  --sh-3:0 10px 30px rgba(0,0,0,.11),0 30px 70px rgba(0,0,0,.16);
  --r-sm:8px; --r-md:11px; --r-lg:14px; --r-xl:18px; --r-2xl:22px; --r-pill:980px;
  --ease:cubic-bezier(0.32,0.72,0,1); --ease-out:cubic-bezier(0.16,1,0.3,1);
  --dur:.22s;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC",
         "Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg:#000000; --panel:#1C1C1E; --panel-2:#2C2C2E;
  --fill:rgba(120,120,128,.24); --fill-strong:rgba(120,120,128,.36);
  --row-hover:#2C2C2E;
  --thead:rgba(28,28,30,.86);
  --glass:rgba(28,28,30,.72);
  --line:rgba(84,84,88,.36); --line-strong:rgba(84,84,88,.60);
  --txt:#FFFFFF; --txt-2:rgba(235,235,245,.60); --txt-3:rgba(235,235,245,.30);
  --accent:#D97706; --accent-strong:#F2A93B;
  --accent-tint:rgba(10,132,255,.18); --accent-ring:rgba(10,132,255,.40);
  --danger:#FF453A; --danger-text:#FF6961; --danger-tint:rgba(255,69,58,.18);
  --ok:#30D158; --ok-text:#5BE07C; --ok-tint:rgba(48,209,88,.18);
  --warn:#FF9F0A; --warn-tint:rgba(255,159,10,.18);
  --purple:#BF5AF2; --purple-tint:rgba(191,90,242,.20);
  --sh-1:0 1px 2px rgba(0,0,0,.3),0 3px 10px rgba(0,0,0,.35);
  --sh-2:0 2px 6px rgba(0,0,0,.35),0 10px 28px rgba(0,0,0,.45);
  --sh-3:0 10px 30px rgba(0,0,0,.5),0 30px 70px rgba(0,0,0,.6);
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
  font-family:var(--font);
  background:var(--bg); color:var(--txt);
  font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* ───────────────────────── 顶栏 ───────────────────────── */
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding:14px 22px;
  background:var(--glass);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
}
.brand { display:flex; align-items:center; gap:12px; min-width:0; }
.logo {
  width:34px; height:34px; flex:0 0 34px;
  border-radius:var(--r-md);
  background:linear-gradient(150deg,#D97706,#B45309);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,122,255,.28);
}
.logo .ico { width:19px; height:19px; stroke:#fff; stroke-width:2; fill:none;
  stroke-linecap:round; stroke-linejoin:round; }
.brand h1 { margin:0; font-size:16px; font-weight:680; letter-spacing:-.3px; }
.brand .sub { font-size:12px; color:var(--txt-2); margin-top:1px; }
.brand .sub b { font-weight:620; color:var(--txt); }
.status-area { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

.pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:var(--r-pill);
  background:var(--fill); color:var(--txt-2);
  font-size:12.5px; font-weight:560; white-space:nowrap;
}
.pill b { color:var(--txt); font-weight:660; }
.pill.ok   { background:var(--ok-tint);     color:var(--ok-text); }
.pill.warn { background:var(--warn-tint);   color:var(--warn); }
.pill.mute { background:var(--fill);        color:var(--txt-2); }
.pill.role-admin { background:var(--purple-tint); color:var(--purple); }
.pill.role-user  { background:var(--accent-tint); color:var(--accent); }

/* ───────────────────────── 按钮 ───────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:7px 15px; border-radius:var(--r-pill);
  border:none; cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:590;
  letter-spacing:-.1px; white-space:nowrap;
  transition:all var(--dur) var(--ease);
}
.btn .ico { width:15px; height:15px; stroke-width:2.1; fill:none;
  stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-strong); }
.btn-ghost { background:var(--fill); color:var(--txt); }
.btn-ghost:hover { background:var(--fill-strong); }
.btn-danger { background:var(--danger-tint); color:var(--danger-text); }
.btn-danger:hover { background:var(--danger); color:#fff; }
.btn-ok { background:var(--ok-tint); color:var(--ok-text); }
.btn-ok:hover { background:var(--ok); color:#fff; }
.btn-sm { padding:5px 11px; font-size:12.5px; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn-icon-only {
  width:34px; height:34px; padding:0; border-radius:50%;
  background:var(--fill); color:var(--txt);
}
.btn-icon-only:hover { background:var(--fill-strong); }
.btn-icon-only .ico { width:16px; height:16px; }

#btnTheme .ico-sun  { display:none; }
#btnTheme .ico-moon { display:block; }
[data-theme="dark"] #btnTheme .ico-sun  { display:block; }
[data-theme="dark"] #btnTheme .ico-moon { display:none; }

/* ───────────────────────── 输入 ───────────────────────── */
.field { margin-bottom:14px; }
.field label {
  display:block; font-size:12.5px; font-weight:600;
  color:var(--txt-2); margin-bottom:6px; letter-spacing:.1px;
}
.field label .opt { font-weight:500; color:var(--txt-3); }
.input {
  width:100%; padding:10px 13px;
  border-radius:var(--r-md);
  border:1px solid var(--line-strong);
  background:var(--panel); color:var(--txt);
  font-family:inherit; font-size:14px;
  transition:border-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.input::placeholder { color:var(--txt-3); }
.input:focus {
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-ring);
}
.input:disabled { background:var(--panel-2); color:var(--txt-2); cursor:not-allowed; }
.hint { font-size:11.5px; color:var(--txt-3); margin-top:5px; }

/* ───────────────────────── 卡片 ───────────────────────── */
.card {
  background:var(--panel);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-1);
  padding:20px;
  border:1px solid var(--line);
}

/* ───────────────────────── 登录页 ─────────────────────── */
.auth-wrap {
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:28px 18px;
  background:
    radial-gradient(1000px 520px at 12% -8%, var(--accent-tint), transparent 62%),
    radial-gradient(900px 480px at 92% 106%, var(--purple-tint), transparent 60%),
    var(--bg);
}
.auth-box {
  width:100%; max-width:400px;
  background:var(--panel);
  border-radius:var(--r-2xl);
  box-shadow:var(--sh-3);
  border:1px solid var(--line);
  overflow:hidden;
}
.auth-head {
  padding:26px 26px 18px;
  text-align:center;
  border-bottom:1px solid var(--line);
}
.auth-logo {
  width:52px; height:52px; margin:0 auto 12px;
  border-radius:var(--r-lg);
  background:linear-gradient(150deg,#D97706,#B45309);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,122,255,.30);
}
.auth-logo .ico { width:27px; height:27px; stroke:#fff; stroke-width:2;
  fill:none; stroke-linecap:round; stroke-linejoin:round; }
.auth-head h1 { margin:0 0 4px; font-size:19px; font-weight:700; letter-spacing:-.4px; }
.auth-head p { margin:0; font-size:12.5px; color:var(--txt-2); }

.tabs {
  display:flex; gap:4px; padding:12px 16px 0;
}
.tab {
  flex:1; padding:8px 10px; border:none; cursor:pointer;
  border-radius:var(--r-pill);
  background:var(--fill); color:var(--txt-2);
  font-family:inherit; font-size:13px; font-weight:590;
  transition:all var(--dur) var(--ease);
}
.tab:hover { background:var(--fill-strong); color:var(--txt); }
.tab.active { background:var(--accent); color:#fff; box-shadow:0 1px 4px rgba(0,0,0,.14); }

.auth-body { padding:18px 26px 24px; }
.pane { display:none; }
.pane.active { display:block; animation:fadeUp .26s var(--ease-out); }
@keyframes fadeUp { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

.auth-foot {
  padding:13px 26px;
  border-top:1px solid var(--line);
  background:var(--panel-2);
  font-size:11.5px; color:var(--txt-3);
  text-align:center; line-height:1.7;
}

/* ───────────────────────── 提示条 ─────────────────────── */
.msg {
  display:none; padding:9px 13px; border-radius:var(--r-md);
  font-size:12.5px; font-weight:560; margin-bottom:13px;
  line-height:1.5;
}
.msg.show { display:block; animation:fadeUp .2s var(--ease-out); }
.msg.err  { background:var(--danger-tint); color:var(--danger-text); }
.msg.ok   { background:var(--ok-tint);     color:var(--ok-text); }
.msg.info { background:var(--accent-tint); color:var(--accent); }

/* ───────────────────────── 布局 ───────────────────────── */
.main { padding:20px 22px 46px; max-width:1360px; margin:0 auto; }
.sec { margin-bottom:24px; }
.sec-head {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:12px; flex-wrap:wrap;
}
.sec-head h2 {
  margin:0; font-size:14.5px; font-weight:680;
  letter-spacing:-.2px; display:flex; align-items:center; gap:8px;
}
.sec-head .dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 3px var(--accent-tint);
}
.sec-head .note { font-size:12px; color:var(--txt-2); }

/* 统计卡 */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.stat {
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:14px 16px;
  box-shadow:var(--sh-1);
}
.stat .k { font-size:11.5px; color:var(--txt-2); font-weight:560; margin-bottom:5px; }
.stat .v { font-size:24px; font-weight:700; letter-spacing:-.7px;
  font-variant-numeric:tabular-nums; }
.stat .v.accent { color:var(--accent); }
.stat .v.purple { color:var(--purple); }
.stat .v.ok { color:var(--ok-text); }

/* 表格 */
.tbl-wrap {
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-1); overflow:hidden;
}
.tbl-scroll { overflow-x:auto; }
table.tbl { width:100%; border-collapse:collapse; font-size:13px; }
table.tbl thead th {
  position:sticky; top:0; z-index:2;
  text-align:left; padding:10px 13px;
  background:var(--thead); backdrop-filter:blur(12px);
  color:var(--txt-2); font-size:11.5px; font-weight:640;
  letter-spacing:.3px; white-space:nowrap;
  border-bottom:1px solid var(--line-strong);
}
table.tbl tbody td {
  padding:10px 13px; border-bottom:1px solid var(--line);
  vertical-align:middle;
}
table.tbl tbody tr:last-child td { border-bottom:none; }
table.tbl tbody tr:hover { background:var(--row-hover); }
table.tbl .num { font-variant-numeric:tabular-nums; font-family:var(--mono); font-size:12.5px; }
table.tbl .no { font-family:var(--mono); font-weight:640; color:var(--accent); }
table.tbl .muted { color:var(--txt-3); font-size:12px; }
.acts { display:flex; gap:6px; flex-wrap:wrap; }

.empty { padding:44px 20px; text-align:center; color:var(--txt-3); font-size:13px; }

/* 工具条 */
.toolbar {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-bottom:12px;
}
.toolbar .grow { flex:1; min-width:150px; }
.search {
  padding:8px 13px; border-radius:var(--r-pill);
  border:1px solid var(--line-strong); background:var(--panel); color:var(--txt);
  font-family:inherit; font-size:13px; width:100%; max-width:280px;
}
.search:focus { outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-ring); }

/* 弹窗 */
.modal-bg {
  display:none; position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,.38); backdrop-filter:blur(4px);
  align-items:center; justify-content:center; padding:20px;
}
.modal-bg.show { display:flex; animation:fadeUp .2s var(--ease-out); }
.modal {
  width:100%; max-width:440px; background:var(--panel);
  border-radius:var(--r-xl); box-shadow:var(--sh-3);
  border:1px solid var(--line); overflow:hidden;
  max-height:90vh; display:flex; flex-direction:column;
}
.modal-head {
  padding:16px 20px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
}
.modal-head h3 { margin:0; font-size:15px; font-weight:680; }
.modal-body { padding:18px 20px; overflow-y:auto; }
.modal-foot {
  padding:13px 20px; border-top:1px solid var(--line);
  background:var(--panel-2);
  display:flex; gap:8px; justify-content:flex-end;
}
.x-btn {
  border:none; background:var(--fill); color:var(--txt-2);
  width:28px; height:28px; border-radius:50%; cursor:pointer;
  font-size:16px; line-height:1; display:flex;
  align-items:center; justify-content:center;
}
.x-btn:hover { background:var(--fill-strong); color:var(--txt); }

/* 用户号展示块 */
.no-box {
  background:var(--accent-tint); border:1px solid var(--accent-ring);
  border-radius:var(--r-lg); padding:16px; text-align:center;
  margin-bottom:16px;
}
.no-box .lb { font-size:12px; color:var(--txt-2); margin-bottom:6px; }
.no-box .val {
  font-family:var(--mono); font-size:30px; font-weight:700;
  color:var(--accent); letter-spacing:2px;
  font-variant-numeric:tabular-nums;
}
.no-box .tip { font-size:11.5px; color:var(--txt-2); margin-top:7px; }

/* 审计日志 */
.log-line {
  display:flex; gap:10px; padding:7px 0;
  border-bottom:1px solid var(--line); font-size:12.5px;
}
.log-line:last-child { border-bottom:none; }
.log-line .t { font-family:var(--mono); font-size:11.5px;
  color:var(--txt-3); white-space:nowrap; }
.log-line .a { font-weight:620; color:var(--accent); white-space:nowrap; }
.log-line .d { color:var(--txt-2); flex:1; min-width:0; }

/* Toast */
.toast {
  position:fixed; left:50%; bottom:30px; transform:translate(-50%, 22px);
  padding:11px 20px; border-radius:var(--r-pill);
  background:rgba(28,28,30,.95); color:#fff;
  font-size:13px; font-weight:560; z-index:400;
  opacity:0; pointer-events:none;
  transition:all .28s var(--ease-out);
  box-shadow:0 10px 30px rgba(0,0,0,.30);
  max-width:min(88vw, 460px); text-align:center;
}
.toast.show { opacity:1; transform:translate(-50%, 0); }
.toast.ok  { background:rgba(31,143,66,.96); }
.toast.err { background:rgba(215,0,21,.96); }

/* 响应式 */
@media (max-width:900px) {
  .stats { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:720px) {
  .topbar { padding:11px 14px; }
  .main { padding:15px 14px 40px; }
  .brand h1 { font-size:14.5px; }
  .status-area .hide-sm { display:none; }
  .auth-head { padding:22px 20px 15px; }
  .auth-body { padding:16px 20px 20px; }
  table.tbl { font-size:12.5px; }
  table.tbl thead th, table.tbl tbody td { padding:8px 10px; }
}
@media (max-width:520px) {
  .stats { grid-template-columns:1fr; }
}