*,*::before,*::after{box-sizing:border-box}
:root{
  --w:#00d4ff; --p:#9333ea; --g:#22c55e; --r:#ef4444; --y:#f59e0b;
  --bg:#0b1020; --bg2:#131a30; --card:#ffffff; --line:#e6e9f0;
  --text:#1a1f2e; --muted:#6b7280; --grad:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  --r-sm:8px; --r:12px; --r-lg:20px;
  --sh:0 4px 20px rgba(16,24,40,.08); --sh-lg:0 25px 50px rgba(0,0,0,.25);
}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:15px;line-height:1.6;color:var(--text);background:#f7f8fb}
a{color:#5b6ee1;text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.3}
p{margin:0 0 1em}
img{max-width:100%}
small{font-size:.82rem}

/* ---------- 品牌 ---------- */
.brand-name{font-weight:900;letter-spacing:3px;white-space:nowrap}
.b-w{color:var(--w)} .b-m{color:var(--p)} .b-d{color:#2b2f3a}
.brand-sub{display:block;font-size:.7rem;letter-spacing:3px;color:#a6adbd;margin-top:4px;font-weight:600}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  border:1px solid transparent;border-radius:var(--r-sm);padding:.7rem 1.15rem;
  font:inherit;font-weight:600;cursor:pointer;text-decoration:none;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 4px 14px rgba(102,126,234,.28)}
.btn-primary:hover{box-shadow:0 10px 22px rgba(102,126,234,.4);transform:translateY(-2px)}
.btn-ghost{background:#fff;color:var(--text);border-color:var(--line)}
.btn-ghost:hover{background:#f2f4f8}
.btn-danger{background:var(--r);color:#fff}
.btn-danger:hover{filter:brightness(.92)}
.btn-sm{padding:.4rem .75rem;font-size:.84rem;border-radius:var(--r-sm)}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}

/* ---------- 表单 ---------- */
.field{margin-bottom:1rem}
.field label{display:block;font-weight:600;margin-bottom:.4rem;font-size:.9rem}
.field .req{color:var(--r)}
.input{width:100%;border:2px solid var(--line);border-radius:var(--r-sm);
  padding:.7rem .9rem;font:inherit;background:#fff;color:var(--text);transition:border-color .12s,box-shadow .12s}
.input:focus{outline:0;border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,.15)}
.input::placeholder{color:#aeb4c0}
.hint{color:var(--muted);font-size:.8rem;margin-top:.35rem}
.input-group{display:flex}
.input-group .prefix{display:flex;align-items:center;padding:0 .8rem;background:#f2f4f8;
  border:2px solid var(--line);border-right:0;border-radius:var(--r-sm) 0 0 var(--r-sm);color:var(--muted)}
.input-group .input{border-radius:0 var(--r-sm) var(--r-sm) 0}

/* ---------- 提示条 ---------- */
.alert{border-radius:var(--r-sm);padding:.75rem 1rem;margin:0 0 1rem;font-size:.9rem;
  border:1px solid transparent}
.alert-ok{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.alert-err{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.alert-warn{background:#fffbeb;border-color:#fde68a;color:#92400e}
.alert-info{background:#eff6ff;border-color:#bfdbfe;color:#1e40af}

/* ---------- 认证页 ---------- */
.auth-body{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px 16px;
  background:var(--grad)}
.auth-wrap{width:100%;max-width:430px}
.auth-card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:40px 36px}
.auth-brand{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;margin-bottom:22px}
.auth-brand .brand-name{font-size:1.7rem}
.auth-title{font-size:1.05rem;font-weight:700;text-align:center;margin:0 0 4px}
.auth-sub{text-align:center;color:var(--muted);font-size:.8rem;letter-spacing:2px;margin:0 0 24px}
.auth-foot{text-align:center;margin-top:20px;font-size:.9rem;color:var(--muted)}
.auth-foot a{font-weight:600}
.auth-note{text-align:center;color:#a6adbd;font-size:.72rem;line-height:1.7;margin-top:18px}
.divider{display:flex;align-items:center;gap:10px;margin:20px 0 14px;color:#a6adbd;font-size:.82rem}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.tg-wrap{display:flex;justify-content:center}
.tg-wrap iframe{border:0;}

/* ---------- 应用外壳 ---------- */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;
  padding:12px 22px;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--sh)}
.topbar-brand{display:flex;align-items:center;gap:9px;text-decoration:none}
.topbar-brand:hover{text-decoration:none}
.topbar-brand .brand-name{font-size:1.1rem}
.topbar-nav{margin-left:auto;display:flex;align-items:center;gap:16px}
.topbar-nav>a:not(.btn){color:var(--muted);font-weight:600;font-size:.9rem}
.topbar-nav>a:not(.btn):hover{color:var(--text);text-decoration:none}
.topbar-user{display:flex;align-items:center;gap:7px;font-size:.86rem;color:var(--muted);
  padding-left:14px;border-left:1px solid var(--line)}
.avatar{width:24px;height:24px;border-radius:50%}
.app-main{max-width:1180px;margin:0 auto;padding:28px 22px 56px}
.foot{max-width:1180px;margin:0 auto;padding:20px 22px 40px;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:10px;color:var(--muted);font-size:.84rem;border-top:1px solid var(--line)}
.foot-links{display:flex;gap:14px}

/* ---------- 卡片 / 表格 ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:22px;margin-bottom:20px}
.card-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:-4px 0 16px}
.card-head h2,.card-head h3{margin:0;font-size:1.05rem}
.card-head .spacer{margin-left:auto}
.grid{display:grid;gap:16px}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--sh)}
.stat .label{color:var(--muted);font-size:.82rem;font-weight:600}
.stat .value{font-size:1.75rem;font-weight:800;margin-top:4px;letter-spacing:-.5px}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{background:#f7f8fb;font-weight:700;font-size:.8rem;color:var(--muted);letter-spacing:.4px}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#fafbfd}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85em;
  background:#f1f3f8;padding:.12em .4em;border-radius:4px}
.empty{padding:40px;text-align:center;color:var(--muted)}

/* ---------- 徽章 ---------- */
.badge{display:inline-block;padding:.16em .6em;border-radius:999px;font-size:.76rem;font-weight:700}
.badge-active{background:#ecfdf5;color:#065f46}
.badge-pending{background:#fffbeb;color:#92400e}
.badge-suspended{background:#fef2f2;color:#991b1b}
.badge-admin{background:#eef2ff;color:#3730a3}
.badge-member{background:#f1f3f8;color:#475569}
.badge-ok{background:#ecfdf5;color:#065f46}
.badge-bad{background:#fef2f2;color:#991b1b}

/* ---------- 工具条 ---------- */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.pagination{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}
.page{counter-increment:none}

/* ---------- 落地页 ---------- */
.hero{text-align:center;padding:60px 20px 44px}
.hero h1{font-size:clamp(1.8rem,4.5vw,3rem);letter-spacing:-1px}
.hero .lede{color:var(--muted);font-size:1.05rem;max-width:640px;margin:0 auto 26px}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.feature{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--sh)}
.feature h3{font-size:.98rem}
.feature p{color:var(--muted);font-size:.89rem;margin:0}

@media (max-width:640px){
  .auth-card{padding:30px 22px}
  .topbar{padding:10px 14px;gap:10px}
  .topbar-nav{gap:11px}
  .topbar-user{display:none}
  .app-main{padding:20px 14px 44px}
  .foot{padding:16px 14px 32px}
  .brand-name{letter-spacing:2px}
}