:root{
  --bg:#060a12;
  --panel:#0b1220;
  --panel2:#0c1526;
  --stroke:rgba(115,196,255,.16);
  --stroke2:rgba(255,255,255,.08);
  --text:#d7e6ff;
  --muted:rgba(215,230,255,.65);
  --ok:#1dff9f;
  --bad:#ff4d6d;
  --unk:#f6c945;
  --blue:#73c4ff;
  --shadow: 0 10px 26px rgba(0,0,0,.45);
  --radius: 16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 900px at 20% 10%, rgba(115,196,255,.12), transparent 60%),
    radial-gradient(900px 700px at 80% 20%, rgba(29,255,159,.10), transparent 55%),
    radial-gradient(1000px 800px at 50% 90%, rgba(255,77,109,.10), transparent 55%),
    var(--bg);
  color:var(--text);
  font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
}

.topbar{
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(6,10,18,.90), rgba(6,10,18,.62));
  border-bottom: 1px solid var(--stroke2);
}

.topbar-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}

.container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 14px 40px;
}

.brand-title{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
}

.brand-title .pw{
  color: var(--blue);
  font-weight: 900;
  letter-spacing:.3px;
}

.brand-title .pc{
  font-weight: 1000;
  letter-spacing: .6px;
  text-transform: none;
  /* 科技风：渐变 + 发光 + 轻微描边 */
  background: linear-gradient(90deg,
    rgba(115,196,255,1),
    rgba(29,255,159,1),
    rgba(246,201,69,1)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 14px rgba(115,196,255,.28),
    0 0 22px rgba(29,255,159,.18);
  filter: saturate(1.15);
}

.brand-title .sep{color:rgba(215,230,255,.25)}
.brand-title .sub{color:rgba(215,230,255,.78); font-weight:750}

.topbar-right{
  display:flex;
  align-items:center;
  gap: 12px;
}

.topbar-meta{
  display:flex;
  flex-direction:column;
  gap: 2px;
  color: var(--muted);
  font-size: 12px;
  text-align:right;
  white-space:nowrap;
}

.meta-item{
  display:flex;
  gap: 8px;
  justify-content:flex-end;
  align-items:baseline;
}
.meta-k{opacity:.75}
.meta-v{
  font-weight:900;
  color: rgba(215,230,255,.92);
}

.btn{
  border: 1px solid rgba(115,196,255,.22);
  background: linear-gradient(180deg, rgba(12,21,38,.80), rgba(11,18,32,.65));
  color: rgba(215,230,255,.95);
  border-radius: 12px;
  padding: 10px 12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap: 8px;
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
  user-select:none;
}
.btn:hover{
  border-color: rgba(115,196,255,.42);
  box-shadow: 0 14px 26px rgba(0,0,0,.42);
}
.btn:active{
  transform: translateY(1px);
}
.btn-ico{
  display:inline-flex;
  width: 18px;
  height: 18px;
  align-items:center;
  justify-content:center;
  font-weight: 1000;
  color: rgba(29,255,159,.95);
  text-shadow: 0 0 10px rgba(29,255,159,.25);
}
.btn-txt{font-weight: 900; letter-spacing:.3px}

@media (max-width: 760px){
  .topbar-meta{display:none;}
  .btn{padding: 10px 10px;}
  .btn-txt{display:none;}
}

.section{margin-top:18px}
.section-head{
  padding: 10px 6px 12px;
  border-bottom: 1px solid var(--stroke2);
  margin-bottom: 14px;
}
.section-head h2{margin:0; font-size: 16px; letter-spacing:.2px}
.section-head p{margin:6px 0 0; color:var(--muted)}

.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}

@media (max-width: 980px){
  .grid{grid-template-columns: repeat(2, minmax(0,1fr));}
}
@media (max-width: 620px){
  .grid{grid-template-columns: 1fr;}
}

.game-grid{
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 820px){
  .game-grid{grid-template-columns: 1fr;}
}

.card{
  background: linear-gradient(180deg, rgba(11,18,32,.92), rgba(11,18,32,.75));
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  position: relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(500px 120px at 40% 0%, rgba(115,196,255,.14), transparent 65%),
    radial-gradient(500px 160px at 80% 10%, rgba(29,255,159,.10), transparent 70%);
  pointer-events:none;
}
.card > *{position:relative}

.card.wide{grid-column: 1 / -1;}

.card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.name{
  font-weight: 1000;
  font-size: 16px;
  letter-spacing:.2px;
}
.small{color:var(--muted); margin-top:4px; font-size: 12px}

.status{
  font-weight: 1000;
  font-size: 16px;
  padding: 2px 10px;
  border-radius: 999px;
  border:1px solid var(--stroke2);
}
.status.ok{color: var(--ok); text-shadow: 0 0 10px rgba(29,255,159,.25)}
.status.bad{color: var(--bad); text-shadow: 0 0 10px rgba(255,77,109,.25)}
.status.unk{color: var(--unk); text-shadow: 0 0 10px rgba(246,201,69,.22)}

.kv{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px 12px;
  margin-top: 8px;
}
.item{
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(12,21,38,.55);
  border-radius: 12px;
  padding: 10px;
}
.k{color:rgba(215,230,255,.65); font-size: 12px}
.v{margin-top:4px; font-weight:800}

.uptime{margin-top: 12px}
.uptime .row{display:flex; justify-content:space-between; align-items:center; margin-bottom: 8px}
.uptime .label{color:var(--muted); font-size:12px}
.uptime .pct{font-weight:1000}
.uptime canvas{width:100%; display:block; border-radius: 10px;}

.donut-row{
  display:flex;
  gap: 12px;
  margin-top: 10px;
}
.donut{
  flex:1;
  min-width: 0;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(12,21,38,.55);
  border-radius: 14px;
  padding: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.donut canvas{
  width: 120px;
  height: 120px;
  display:block;
}

@media (max-width: 360px){
  .donut canvas{ width: 108px; height: 108px; }
}

/* 概览卡片 */
.overview{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 18px 16px;
}
.overview-left{
  display:flex;
  align-items:center;
  gap: 14px;
}
.overview-ico{
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 30px;
  font-weight: 1000;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(12,21,38,.55);
}
.overview-ico.ok{
  color: var(--ok);
  text-shadow: 0 0 14px rgba(29,255,159,.25);
}
.overview-ico.warn{
  color: var(--unk);
  text-shadow: 0 0 14px rgba(246,201,69,.22);
}
.overview-title{
  font-size: 16px;
  font-weight: 1000;
  letter-spacing:.2px;
}
.overview-desc{
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}
.overview-badge{
  font-weight: 1000;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(12,21,38,.55);
}
.overview-badge.ok{ color: var(--ok); }
.overview-badge.warn{ color: var(--unk); }

.footer{margin-top: 22px; padding: 10px 4px}
.muted{color:var(--muted)}