*{box-sizing:border-box}
:root{
  --bg:#f4f9fc;--panel:#fff;--text:#17384a;--muted:#6f7f89;--accent:#78c8f3;
  --accent2:#5db8e8;--border:#dcebf3;--ok:#2db76b;--bad:#dc5050;--warn:#d79a1d;
}
html{font-family:Arial,"Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text)}
body{margin:0;min-height:100vh;background:var(--bg)}
button,input{font:inherit}
button{cursor:pointer}
.wrap{width:min(92%,980px);margin:0 auto}
.hero{background:linear-gradient(135deg,#9bdcff,#6fc5f1);padding:34px 0}
.hero-inner{display:flex;align-items:center;gap:18px}
.brand-logo{width:82px;height:82px;border-radius:18px;object-fit:cover;background:#fff}
.eyebrow{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.14em;color:#315a70}
h1{margin:0;font-size:clamp(30px,6vw,48px)}
h2{font-size:20px;margin:0 0 16px}
.hero-subtitle{margin:8px 0 0}
.page-main{padding:28px 0}
.panel,.auth-card,.admin-section{background:var(--panel);border:1px solid var(--border);border-radius:18px}
.status-panel{padding:24px}
.status-heading,.dashboard-top,.section-title,.server-address{display:flex;align-items:center;justify-content:space-between;gap:16px}
.status-line{display:flex;align-items:center;gap:9px;font-size:21px}
.status-dot{width:13px;height:13px;border-radius:50%;background:#9aa7ad}
.status-dot.online{background:var(--ok)}
.status-dot.offline{background:var(--bad)}
.muted{color:var(--muted)}
.small{font-size:13px}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.metric{padding:17px;border:1px solid var(--border);border-radius:14px;background:#fafdff}
.metric span{display:block;color:var(--muted);font-size:13px;margin-bottom:7px}
.metric strong{font-size:22px;overflow-wrap:anywhere}
.server-address{margin-top:22px;padding:17px;border-radius:14px;background:#eef8fd}
.server-address strong{display:block;margin-top:5px;font-size:20px}
.primary-btn,.secondary-btn,.danger-btn{
  border:0;border-radius:11px;padding:11px 17px;font-weight:700
}
.primary-btn{background:var(--accent);color:#15384a}
.primary-btn:hover{background:var(--accent2)}
.secondary-btn{background:#edf6fb;color:#214b61;border:1px solid var(--border)}
.danger-btn{background:#ffe7e7;color:#922f2f;border:1px solid #f3caca}
.full{width:100%;min-height:48px}
.player-section{margin-top:24px}
.player-list{display:flex;flex-wrap:wrap;gap:9px}
.player-chip{padding:7px 10px;border-radius:9px;background:#eef8fd;border:1px solid var(--border)}
.update-time{text-align:center;color:var(--muted);font-size:12px;margin:22px 0 0}
.link-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:16px}
.link-card{text-decoration:none;color:var(--text);padding:18px;border-radius:14px;background:#fff;border:1px solid var(--border)}
.link-card strong,.link-card span{display:block}
.link-card span{color:var(--muted);margin-top:5px;font-size:14px}
.site-footer{text-align:center;color:var(--muted);font-size:13px;padding:18px 0 28px}
.admin-main{padding:38px 0}
.auth-card{width:min(100%,470px);margin:8vh auto 0;padding:28px}
.auth-brand{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.auth-brand img{width:60px;height:60px;border-radius:14px;object-fit:cover}
.auth-brand h1{font-size:28px}
.field{display:block;margin:22px 0 15px}
.field span{display:block;font-size:14px;margin-bottom:7px}
.field input{width:100%;border:1px solid #cbdce5;border-radius:11px;padding:12px 13px;background:#fff;outline:none}
.field input:focus{border-color:#67bce8;box-shadow:0 0 0 3px rgba(103,188,232,.18)}
.message{min-height:22px;font-size:14px;color:var(--muted)}
.message.error{color:#b13d3d}
.message.success{color:#207846}
.hidden{display:none!important}
.dashboard-top{margin-bottom:18px}
.dashboard-actions{display:flex;gap:9px}
.admin-section{padding:21px;margin-top:14px}
.admin-metrics{margin-top:0}
.status-pill{padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700}
.status-pill.good{background:#e3f7eb;color:#1d7443}
.status-pill.bad{background:#fdeaea;color:#943838}
.status-pill.neutral{background:#eef2f4;color:#5f6d75}
.progress{height:8px;background:#e7eef2;border-radius:99px;margin-top:12px;overflow:hidden}
.progress div{height:100%;width:0;background:var(--accent);transition:width .25s}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:11px;border-bottom:1px solid var(--border);font-size:14px;white-space:nowrap}
th{color:var(--muted);font-weight:600}
.detail-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.detail-list div{padding:13px;border:1px solid var(--border);border-radius:12px}
.detail-list span,.detail-list strong{display:block}
.detail-list span{font-size:12px;color:var(--muted);margin-bottom:5px}
@media(max-width:720px){
  .metric-grid,.admin-metrics{grid-template-columns:repeat(2,1fr)}
  .hero-inner{align-items:flex-start}
  .status-heading,.dashboard-top{align-items:flex-start;flex-direction:column}
}
@media(max-width:450px){
  .metric-grid,.admin-metrics,.link-grid,.detail-list{grid-template-columns:1fr}
  .status-panel,.admin-section,.auth-card{padding:17px}
  .brand-logo{width:66px;height:66px}
  .server-address{align-items:flex-start;flex-direction:column}
  .server-address .primary-btn{width:100%}
}