*{box-sizing:border-box}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color:#1b1d22
}
.bg,.adminbg{min-height:100vh;background:#f4f6f8}
.panel{
  width:min(92%,520px);
  margin:8vh auto;
  background:#fff;
  border-radius:20px;
  padding:28px;
  box-shadow:0 10px 35px rgba(0,0,0,.08)
}
.front{margin-top:7vh}
.login{margin-top:12vh}
.brand{text-align:center;margin-bottom:25px}
.brand h1{margin:0 0 7px;font-size:27px}
.logo{
  width:66px;height:66px;border-radius:18px;
  margin:0 auto 12px;background:#111;color:#fff;
  display:grid;place-items:center;font-size:25px;font-weight:800
}
.muted{color:#737985}
.small{font-size:13px}
.center{text-align:center}
.form{display:grid;gap:14px}
.form label,.inline label{
  display:grid;gap:7px;font-size:14px;font-weight:600
}
input,select,textarea{
  width:100%;
  border:1px solid #d9dde3;
  border-radius:10px;
  padding:10px 12px;
  font-size:16px;
  background:#fff;
  font-family:inherit;
  outline:none
}
input,select{min-height:46px}
textarea{resize:vertical;line-height:1.6}
input:focus,textarea:focus,select:focus{
  border-color:#aaa;
  box-shadow:0 0 0 3px rgba(0,0,0,.04)
}
.btn,button{
  border:0;border-radius:10px;padding:11px 16px;
  cursor:pointer;background:#e9edf2;font-weight:700
}
.btn.primary{background:#111;color:#fff}
.btn.big{width:100%;min-height:52px;font-size:17px}
.btn:disabled{opacity:.6}
.alert{padding:12px 14px;border-radius:10px;margin:12px 0}
.error{background:#fff0f0;color:#a82121}
.success{background:#eefaf1;color:#23743a}
.accountbox{
  background:#f7f8fa;border-radius:14px;
  padding:8px 16px;margin:20px 0;
  min-height:180px;display:grid;align-content:center
}
.placeholder{text-align:center;color:#8a9099}
.row{
  display:flex;justify-content:space-between;
  gap:18px;padding:13px 0;border-bottom:1px solid #e8ebef
}
.row:last-child{border-bottom:0}
.row span{color:#737985;white-space:nowrap}
.row b{text-align:right;word-break:break-all}
.system-row{font-size:12px;color:#8a9099}
.system-row span,.system-row b{color:#8a9099;font-weight:500}
.secret{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.front-note{
  margin-top:18px;
  padding:14px 15px;
  border-radius:12px;
  background:#f7f8fa;
  color:#68707d;
  font-size:13px;
  line-height:1.7;
  text-align:center;
  word-break:break-word
}
.top{
  height:60px;background:#fff;border-bottom:1px solid #e5e8ec;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 4vw;position:sticky;top:0;z-index:3
}
.top b small{font-size:12px;color:#8a9099;font-weight:500}
.top nav{display:flex;gap:18px}
.top a{text-decoration:none;color:#333}
.adminwrap{width:min(96%,1200px);margin:24px auto 60px}
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:14px;margin-bottom:18px
}
.stats>div,.card{
  background:#fff;border-radius:14px;padding:18px;
  box-shadow:0 4px 18px rgba(0,0,0,.04)
}
.stats span{display:block;color:#7a808a;font-size:13px}
.stats b{display:block;font-size:30px;margin-top:8px}
.card{margin-bottom:18px}
.card h2{font-size:18px;margin:0 0 14px}
.card h2 small{font-size:12px;color:#8a9099;font-weight:400}
.inline{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
.tablewrap{overflow:auto;margin-top:14px}
table{width:100%;border-collapse:collapse;min-width:900px}
th,td{
  text-align:left;padding:11px 10px;
  border-bottom:1px solid #eef0f2;
  font-size:13px;vertical-align:top
}
th{color:#6f7580;background:#fafbfc}
.ok{color:#14823c;font-weight:700}
.bad{color:#c42727;font-weight:700}
.badge{
  display:inline-block;
  background:#e9f7ee;color:#18823e;
  padding:5px 8px;border-radius:999px;
  white-space:nowrap
}
.gatebox{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;padding:14px 16px;
  border:1px solid #e5e7eb;border-radius:14px;background:#fafafa
}
.error-cell{max-width:300px;color:#8b3030;word-break:break-word}
.empty-cell{text-align:center;color:#8a9099;padding:28px}
code{font-size:13px}

@media(max-width:800px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .adminwrap{width:94%}
  .panel{margin-top:5vh;padding:22px}
  .top{padding:0 16px}
}
@media(max-width:420px){
  .panel{width:94%;padding:20px;margin-top:4vh}
  .brand h1{font-size:24px}
  .stats{gap:10px}
  .stats>div{padding:15px}
  .stats b{font-size:24px}
  .row{gap:10px}
}