/* 访问网关共用样式 —— 与计算程序同一套设计语言 */
:root {
  --bg: #f3f5f9; --surface: #fff; --surface-2: #f7f9fc; --surface-3: #eef2f7;
  --line: #e3e8ef; --line-2: #d3dae4;
  --ink: #0d1726; --ink-2: #445167; --ink-3: #7b8798; --ink-4: #a6b0be;
  --brand: #1d4ed8; --brand-2: #2563eb; --brand-soft: #e8efff;
  --ok: #0f7b46; --ok-soft: #e4f7ec; --warn: #a16207; --warn-soft: #fdf4d8;
  --bad: #b91c1c; --bad-soft: #fdeaea;
  --nav: #0b1524; --nav-2: #101d30;
  --mono: "SF Mono", "Cascadia Mono", Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg); color: var(--ink); font-family: var(--sans);
  font-size: 13.5px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.small { font-size: 12px; }
.tiny { font-size: 10.8px; }
.hidden { display: none !important; }

/* ---------- 登录页 ---------- */
.login-wrap { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 100vh; }
.login-left {
  background: radial-gradient(120% 120% at 12% 8%, #16263d 0%, #0b1524 55%, #080f1a 100%);
  color: #dbe6f5; padding: 54px 56px; display: flex; flex-direction: column; position: relative; overflow: hidden;
}
.login-left::after {
  content: ""; position: absolute; right: -120px; bottom: -160px; width: 420px; height: 420px;
  border-radius: 50%; background: radial-gradient(circle, rgba(59,130,246,.22), transparent 62%);
}
.brand-row { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none;
  background: linear-gradient(145deg, #1e40af, #2563eb 60%, #3b82f6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 22px -8px rgba(37,99,235,.9);
}
.brand-mark svg { width: 21px; height: 21px; }
.brand-name { font-size: 15px; font-weight: 650; letter-spacing: .3px; color: #fff; }
.brand-sub { font-size: 11px; color: #7f93ad; letter-spacing: .4px; }
.login-left h1 { font-size: 27px; line-height: 1.32; margin: 46px 0 14px; letter-spacing: -.4px; color: #fff; font-weight: 680; }
.login-left p.lead { font-size: 13.5px; color: #9fb0c7; max-width: 420px; margin: 0; }
.feat { margin-top: 34px; display: grid; gap: 12px; max-width: 430px; }
.feat div { display: flex; gap: 10px; align-items: flex-start; font-size: 12.6px; color: #b9c8db; }
.feat svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: #60a5fa; }
.login-left .foot { margin-top: auto; padding-top: 34px; font-size: 11px; color: #5b6f8a; line-height: 1.8; }

.login-right { display: grid; place-items: center; padding: 40px 24px; }
.login-card {
  width: min(392px, 100%); background: #fff; border: 1px solid var(--line);
  border-radius: 16px; padding: 26px 26px 22px; box-shadow: 0 18px 50px -28px rgba(13,23,38,.45);
}
.login-card h2 { margin: 0 0 4px; font-size: 18px; letter-spacing: -.2px; }
.login-card .sub { font-size: 12px; color: var(--ink-3); margin-bottom: 18px; }
.tabs { display: flex; gap: 4px; background: var(--surface-3); padding: 3px; border-radius: 9px; margin-bottom: 18px; }
.tabs button {
  flex: 1; border: none; background: none; font-family: inherit; font-size: 12.5px; font-weight: 550;
  color: var(--ink-2); padding: 7px 6px; border-radius: 7px; cursor: pointer;
}
.tabs button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(13,23,38,.12); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  height: 42px; border-radius: 9px; border: 1px solid var(--line-2); background: #fff; color: var(--ink);
  font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: .15s;
}
.btn:hover { background: var(--surface-2); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-2); }
.btn-wechat { background: #07c160; border-color: #07c160; color: #fff; }
.btn-wechat:hover { background: #06ad56; }
.btn svg { width: 17px; height: 17px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
label.fl { display: block; font-size: 12px; color: var(--ink-2); margin: 12px 0 5px; }
input[type=text], input[type=password] {
  width: 100%; height: 38px; border: 1px solid var(--line-2); border-radius: 8px; padding: 0 11px;
  font-family: inherit; font-size: 13px; color: var(--ink); background: #fff;
}
input:focus { outline: none; border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.code-input { letter-spacing: 2px; font-family: var(--mono); text-transform: uppercase; }
.hint { font-size: 11px; color: var(--ink-3); margin-top: 6px; line-height: 1.6; }
.alert { border-radius: 8px; padding: 8px 11px; font-size: 12px; margin-bottom: 14px; }
.alert-err { background: var(--bad-soft); color: var(--bad); border: 1px solid #f6cccc; }
.alert-ok { background: var(--ok-soft); color: var(--ok); border: 1px solid #bfe8cf; }
.divider { display: flex; align-items: center; gap: 10px; color: var(--ink-4); font-size: 11px; margin: 16px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.legal { font-size: 11px; color: var(--ink-4); margin-top: 16px; line-height: 1.7; text-align: center; }
.legal a { color: var(--ink-3); text-decoration: none; }
.legal a:hover { color: var(--brand); text-decoration: underline; }

/* ---------- 待审核 ---------- */
.center-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 28px;
  width: min(460px, 100%); box-shadow: 0 18px 50px -28px rgba(13,23,38,.45); text-align: center;
}
.avatar {
  width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center;
  background: linear-gradient(145deg, #1e40af, #3b82f6); color: #fff; font-size: 24px; font-weight: 700;
}
.card h2 { margin: 0 0 6px; font-size: 18px; }
.status-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; margin: 6px 0 14px;
}
.pill-warn { background: var(--warn-soft); color: var(--warn); border: 1px solid #f0dfa8; }
.pill-bad { background: var(--bad-soft); color: var(--bad); border: 1px solid #f6cccc; }
.pill-ok { background: var(--ok-soft); color: var(--ok); border: 1px solid #bfe8cf; }
.kv { text-align: left; border-top: 1px solid var(--line); margin: 14px 0 18px; padding-top: 12px; }
.kv div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 12.3px; }
.kv .k { color: var(--ink-3); }
.kv .v { font-weight: 550; }
.actions { display: flex; gap: 8px; }
.actions .btn { height: 38px; font-size: 13px; text-decoration: none; }

/* ---------- 管理后台 ---------- */
.admin-shell { min-height: 100vh; display: flex; flex-direction: column; }
.admin-top {
  height: 56px; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center;
  gap: 14px; padding: 0 20px; position: sticky; top: 0; z-index: 20;
}
.admin-top .spacer { flex: 1; }
.admin-top .who { font-size: 12.5px; color: var(--ink-2); }
.admin-top .who b { color: var(--ink); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 22px 20px 60px; width: 100%; }
.page-title { font-size: 20px; font-weight: 680; letter-spacing: -.3px; margin: 0 0 3px; }
.page-desc { font-size: 12px; color: var(--ink-3); margin: 0 0 18px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 13px 15px; }
.stat .k { font-size: 11px; color: var(--ink-3); }
.stat .v { font-size: 24px; font-weight: 680; font-variant-numeric: tabular-nums; letter-spacing: -.6px; margin-top: 2px; }
.stat.warn .v { color: var(--warn); }
.stat.ok .v { color: var(--ok); }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.panel-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg,#fff,var(--surface-2)); flex-wrap: wrap; }
.panel-head h3 { margin: 0; font-size: 13.5px; font-weight: 650; }
.panel-head .spacer { flex: 1; }
.tabs2 { display: flex; gap: 4px; padding: 10px 16px 0; border-bottom: 1px solid var(--line); background: #fff; flex-wrap: wrap; }
.tabs2 button { border: none; background: none; font-family: inherit; font-size: 12.6px; color: var(--ink-2); padding: 7px 12px; border-radius: 8px 8px 0 0; cursor: pointer; border-bottom: 2px solid transparent; }
.tabs2 button.on { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; background: var(--brand-soft); }
table { width: 100%; border-collapse: collapse; font-size: 12.4px; }
th { text-align: left; font-size: 11px; color: var(--ink-3); font-weight: 600; background: var(--surface-2); padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 9px 12px; border-bottom: 1px solid #eef1f6; vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #fafcff; }
.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; }
.t-pending { background: var(--warn-soft); color: var(--warn); }
.t-active { background: var(--ok-soft); color: var(--ok); }
.t-blocked, .t-expired { background: var(--bad-soft); color: var(--bad); }
.t-admin { background: var(--brand-soft); color: var(--brand); }
.btn-sm {
  height: 27px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--line-2); background: #fff;
  font-family: inherit; font-size: 11.8px; color: var(--ink-2); cursor: pointer; white-space: nowrap;
}
.btn-sm:hover { background: var(--surface-2); border-color: #c2ccda; color: var(--ink); }
.btn-sm.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-sm.primary:hover { background: var(--brand-2); }
.btn-sm.danger { color: var(--bad); border-color: #f0c9c9; }
.btn-sm.danger:hover { background: var(--bad-soft); }
.row-actions { display: flex; gap: 5px; flex-wrap: wrap; }
.empty { padding: 34px; text-align: center; color: var(--ink-3); font-size: 12.5px; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.toolbar input[type=text] { height: 30px; width: 190px; font-size: 12.4px; }
.chips { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.chip { border: 1px solid var(--line-2); background: #fff; border-radius: 999px; padding: 3px 10px; font-size: 11.6px; color: var(--ink-2); cursor: pointer; }
.chip.on { background: var(--brand); color: #fff; border-color: var(--brand); }
pre.log { margin: 0; padding: 12px 16px; font-family: var(--mono); font-size: 11.6px; line-height: 1.75; max-height: 520px; overflow: auto; background: #fbfcfe; }
pre.log b { color: var(--brand); font-weight: 600; }
.modal-mask { position: fixed; inset: 0; background: rgba(12,20,33,.45); display: grid; place-items: center; z-index: 60; padding: 20px; }
.modal { background: #fff; border-radius: 14px; width: min(430px, 100%); box-shadow: 0 24px 60px -20px rgba(0,0,0,.5); }
.modal h3 { margin: 0; padding: 16px 20px; border-bottom: 1px solid var(--line); font-size: 14px; }
.modal .body { padding: 16px 20px; }
.modal .foot { padding: 12px 20px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; }
.modal .foot .btn { width: auto; padding: 0 16px; height: 34px; font-size: 12.5px; }
.days { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 12px; }
.days button { border: 1px solid var(--line-2); background: #fff; border-radius: 8px; padding: 6px 12px; font-family: inherit; font-size: 12.2px; cursor: pointer; }
.days button.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.toast-wrap { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: #0f1c2e; color: #e8eef7; padding: 8px 16px; border-radius: 8px; font-size: 12.5px; box-shadow: 0 8px 26px -8px rgba(0,0,0,.5); }
.toast.err { background: #7f1d1d; }

@media (max-width: 900px) {
  .login-wrap { grid-template-columns: 1fr; }
  .login-left { padding: 32px 26px; }
  .login-left h1 { font-size: 22px; margin-top: 24px; }
  .feat { display: none; }
  .login-right { padding: 24px 16px 40px; }
  .login-card { box-shadow: none; border: none; padding: 20px 4px; width: 100%; }
  .admin-top .who { display: none; }
  .wrap { padding: 16px 12px 50px; }
  th, td { padding: 7px 8px; }
  .hide-sm { display: none; }
}