*{box-sizing:border-box}
body{
  margin:0;
  color:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Arial,sans-serif;
  background:
    radial-gradient(circle at 18% 0%,rgba(59,130,246,.34),transparent 32%),
    radial-gradient(circle at 90% 18%,rgba(168,85,247,.30),transparent 34%),
    radial-gradient(circle at 50% 100%,rgba(34,197,94,.16),transparent 36%),
    #020617;
  -webkit-font-smoothing:antialiased;
}

.top{
  position:sticky;
  top:0;
  z-index:999;
  padding:7px 8px 5px;
  background:rgba(8,12,24,.76);
  backdrop-filter:blur(26px) saturate(180%);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 14px 38px rgba(0,0,0,.32);
}

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

.box{
  position:relative;
  overflow:hidden;
  min-height:62px;
  padding:7px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 26px rgba(0,0,0,.24);
  text-align:center;
}

.row:first-child{
  grid-template-columns:minmax(0,1fr) max-content minmax(0,1fr);
}
.row:first-child .box:nth-child(2){
  width:max-content;
  padding-left:7px;
  padding-right:7px;
}

.sbox{height:100%;display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr 1fr;align-items:center;gap:2px 5px}
.s-title{grid-row:1/3;font-size:10px;font-weight:900;white-space:nowrap}
.s-ok,.s-bad{font-size:10.5px;font-weight:900;white-space:nowrap;line-height:1}
.s-bad.ok{opacity:.6;filter:grayscale(1)}

.tbox{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px}
.t-title,.t-time{font-size:9px;font-weight:900;white-space:nowrap;line-height:1}

.ubox{height:100%;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px}
.u-title{font-size:10px;font-weight:900;white-space:nowrap}
.u-list div{font-size:8.5px;font-weight:900;white-space:nowrap;line-height:1.05}

.row:nth-child(2) .box{
  min-height:76px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:4px;
  font-size:12px;
  font-weight:900;
}
.row:nth-child(2) .box b{
  font-size:13px;
  line-height:1.12;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

.ip-clock-wrap{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:2px}
.ip-clock{width:24px;height:24px;border:1.8px solid #bfdbfe;border-radius:50%;position:relative;background:rgba(15,23,42,.55)}
.ip-clock:after{content:"";position:absolute;width:4px;height:4px;background:white;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}
.ip-hand{position:absolute;left:50%;bottom:50%;transform-origin:bottom center}
.ip-h{width:2px;height:6px;background:white}.ip-m{width:1.5px;height:8px;background:#bfdbfe}.ip-s{width:1px;height:10px;background:#ef4444}
#ipClockDate,#ipClockText{font-size:8.5px;line-height:1}

.row:nth-child(3) .box{min-height:68px}
.label{font-size:10px;color:#eaf2ff;font-weight:900;white-space:nowrap}
.big{font-size:15px;font-weight:900;margin-top:2px}
.small{font-size:8.5px;color:#cbd5e1;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

#topCollapseBtn{
  display:block;
  margin:3px auto 0;
  height:18px;
  padding:1px 13px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
  color:white;
  font-size:9px;
  font-weight:900;
}

.top.top-collapsed .row{display:none}

.hero,.card{
  max-width:1180px;
  margin:12px auto;
  padding:24px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.055));
  box-shadow:0 28px 80px rgba(0,0,0,.35);
}

h1{margin:0;font-size:42px}
p{color:#cbd5e1}
input,textarea,button{
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px;
  background:rgba(2,6,23,.68);
  color:white;
  padding:12px;
  margin:6px;
}
textarea{width:96%;min-height:130px}

@media(max-width:850px){
  .row{grid-template-columns:repeat(3,minmax(0,1fr))}
  h1{font-size:34px}
}

/* 安全运行时长格子裁剪到文字边缘，左右两格平分剩余 */
.top .row:first-child{
  grid-template-columns:minmax(0,1fr) max-content minmax(0,1fr)!important;
  align-items:stretch!important;
}

.top .row:first-child .box:nth-child(2){
  width:max-content!important;
  min-width:0!important;
  padding-left:2px!important;
  padding-right:2px!important;
  justify-self:center!important;
}

.top .row:first-child .box:nth-child(2) .tbox{
  width:max-content!important;
  min-width:0!important;
  padding:0!important;
  margin:0!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}

.top .row:first-child .box:nth-child(2) .t-title,
.top .row:first-child .box:nth-child(2) .t-time{
  white-space:nowrap!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:0!important;
  padding-right:0!important;
  text-align:center!important;
}

/* v4：安全运行时长缩小并裁剪到文字边缘 */
.top .row:first-child{
  grid-template-columns:minmax(0,1fr) max-content minmax(0,1fr)!important;
  align-items:stretch!important;
}

.top .row:first-child .box:nth-child(2){
  width:max-content!important;
  min-width:0!important;
  padding-left:1px!important;
  padding-right:1px!important;
  justify-self:center!important;
}

.top .row:first-child .box:nth-child(2) .tbox{
  width:max-content!important;
  min-width:0!important;
  padding:0!important;
  margin:0!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  gap:1px!important;
}

.top .row:first-child .box:nth-child(2) .t-title,
.top .row:first-child .box:nth-child(2) .t-time{
  font-size:7px!important;
  line-height:.9!important;
  letter-spacing:-.6px!important;
  white-space:nowrap!important;
  margin:0!important;
  padding:0!important;
  text-align:center!important;
}

/* v6：第一行第1、第3个格子文字缩小 */
.top .row:first-child .box:nth-child(1) .s-title{
  font-size:8px!important;
  letter-spacing:-.6px!important;
}

.top .row:first-child .box:nth-child(1) .s-ok,
.top .row:first-child .box:nth-child(1) .s-bad{
  font-size:8.5px!important;
  letter-spacing:-.8px!important;
  line-height:.9!important;
}

.top .row:first-child .box:nth-child(3) .u-title{
  font-size:8px!important;
  letter-spacing:-.6px!important;
}

.top .row:first-child .box:nth-child(3) .u-list div{
  font-size:7.2px!important;
  letter-spacing:-.5px!important;
  line-height:.9!important;
}

/* v7：第一行第1、第3格文字自动铺满到右侧边缘 */
.top .row:first-child .box:nth-child(1) .sbox{
  grid-template-columns:auto minmax(0,1fr)!important;
  column-gap:4px!important;
}

.top .row:first-child .box:nth-child(1) .s-title{
  font-size:9px!important;
  letter-spacing:-.4px!important;
}

.top .row:first-child .box:nth-child(1) .s-ok,
.top .row:first-child .box:nth-child(1) .s-bad{
  justify-content:flex-end!important;
  font-size:9.5px!important;
  letter-spacing:-.65px!important;
  overflow:hidden!important;
  text-overflow:clip!important;
}

.top .row:first-child .box:nth-child(3) .ubox{
  grid-template-columns:auto minmax(0,1fr)!important;
  column-gap:4px!important;
}

.top .row:first-child .box:nth-child(3) .u-title{
  font-size:9px!important;
  letter-spacing:-.4px!important;
}

.top .row:first-child .box:nth-child(3) .u-list{
  text-align:right!important;
  justify-items:end!important;
}

.top .row:first-child .box:nth-child(3) .u-list div{
  font-size:8px!important;
  letter-spacing:-.35px!important;
  line-height:.95!important;
}

/* v8：第一行第1格完整显示，第3格右侧三行居中 */
.top .row:first-child .box:nth-child(1){
  padding-left:3px!important;
  padding-right:3px!important;
}

.top .row:first-child .box:nth-child(1) .sbox{
  grid-template-columns:auto 1fr!important;
  column-gap:2px!important;
}

.top .row:first-child .box:nth-child(1) .s-title{
  font-size:8.3px!important;
  letter-spacing:-.7px!important;
}

.top .row:first-child .box:nth-child(1) .s-ok,
.top .row:first-child .box:nth-child(1) .s-bad{
  justify-content:center!important;
  font-size:8.4px!important;
  letter-spacing:-1px!important;
  white-space:nowrap!important;
  overflow:visible!important;
}

.top .row:first-child .box:nth-child(3) .ubox{
  grid-template-columns:auto 1fr!important;
  column-gap:3px!important;
}

.top .row:first-child .box:nth-child(3) .u-title{
  font-size:8.6px!important;
  letter-spacing:-.55px!important;
}

.top .row:first-child .box:nth-child(3) .u-list{
  height:100%!important;
  display:grid!important;
  grid-template-rows:repeat(3,1fr)!important;
  align-items:center!important;
  justify-items:center!important;
  text-align:center!important;
}

.top .row:first-child .box:nth-child(3) .u-list div{
  width:100%!important;
  font-size:7.6px!important;
  letter-spacing:-.55px!important;
  line-height:1!important;
  text-align:center!important;
}

/* v9：✅❌ 状态行稍微放大 */
.s-ok,
.s-bad{
  font-size:11.5px!important;
  letter-spacing:-.8px!important;
  line-height:1!important;
}

/* v10：第三行裁剪无内容空白 */
.top .row:nth-child(3) .box{
  min-height:0!important;
  height:auto!important;
  padding-top:3px!important;
  padding-bottom:3px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

.top .row:nth-child(3) .label{
  margin:0!important;
  line-height:.95!important;
}

.top .row:nth-child(3) .big{
  margin-top:1px!important;
  margin-bottom:0!important;
  line-height:.95!important;
}

.top .row:nth-child(3) .small{
  margin-top:1px!important;
  margin-bottom:0!important;
  line-height:.9!important;
}

.clock-mini{
  margin:0!important;
}

/* v11：第二行文字整体再缩小 */
.top .row:nth-child(2) .box{
  font-size:9px!important;
  line-height:1!important;
}

.top .row:nth-child(2) .box b{
  font-size:9.5px!important;
  line-height:1!important;
}

#ipClockDate,
#ipClockText{
  font-size:7.5px!important;
  line-height:.95!important;
}

/* v12：第二行以第三格为准，删除上下空白 */
.top .row:nth-child(2){
  align-items:stretch!important;
}

.top .row:nth-child(2) .box{
  min-height:0!important;
  height:auto!important;
  padding-top:2px!important;
  padding-bottom:2px!important;
  gap:1px!important;
  line-height:.9!important;
  justify-content:center!important;
}

.top .row:nth-child(2) .box b{
  margin:0!important;
  line-height:.9!important;
}

.top .row:nth-child(2) .box:nth-child(3){
  padding-top:1px!important;
  padding-bottom:1px!important;
  gap:0!important;
  grid-template-rows:auto auto auto!important;
  align-content:center!important;
}

.top .row:nth-child(2) .box:nth-child(3) .ip-clock-wrap{
  margin-top:-2px!important;
  margin-bottom:-2px!important;
  height:auto!important;
}

#ipClockDate,
#ipClockText{
  margin:0!important;
  line-height:.85!important;
}

/* v13：顶部三行稍微加高一点点 */
.top .row:nth-child(1) .box{
  min-height:62px!important;
  height:62px!important;
  padding-top:5px!important;
  padding-bottom:5px!important;
}

.top .row:nth-child(2) .box{
  min-height:54px!important;
  height:54px!important;
  padding-top:4px!important;
  padding-bottom:4px!important;
  gap:2px!important;
  line-height:1!important;
}

.top .row:nth-child(2) .box:nth-child(3){
  gap:1px!important;
}

.top .row:nth-child(2) .box:nth-child(3) .ip-clock-wrap{
  margin-top:0!important;
  margin-bottom:0!important;
}

.top .row:nth-child(3) .box{
  min-height:50px!important;
  height:50px!important;
  padding-top:4px!important;
  padding-bottom:4px!important;
}

#topCollapseBtn{
  margin-top:3px!important;
}

/* v14：修正收起按钮位置 */
.top{
  display:block!important;
}

#topCollapseBtn{
  position:relative!important;
  display:block!important;
  width:96%!important;
  max-width:none!important;
  height:18px!important;
  margin:4px auto 0!important;
  padding:0!important;
  text-align:center!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.18)!important;
  background:rgba(255,255,255,.10)!important;
  color:#fff!important;
  font-size:9px!important;
  font-weight:900!important;
  line-height:16px!important;
  z-index:5!important;
}

.top.top-collapsed{
  padding:4px 8px!important;
}

.top.top-collapsed #topCollapseBtn{
  width:96%!important;
  margin:0 auto!important;
}

/* v15：缩小第一行服务器状态 ✅ 和 ❌ 之间的空隙 */
.top .row:first-child .box:nth-child(1) .sbox{
  grid-template-rows:auto auto!important;
  row-gap:0!important;
  column-gap:4px!important;
  align-content:center!important;
}

.top .row:first-child .box:nth-child(1) .s-ok,
.top .row:first-child .box:nth-child(1) .s-bad{
  line-height:.82!important;
  margin:0!important;
  padding:0!important;
  align-items:center!important;
}

/* v16：第一行服务器状态 ✅ ❌ 保留细微间距 */
.top .row:first-child .box:nth-child(1) .sbox{
  grid-template-rows:auto auto!important;
  row-gap:3px!important;
  column-gap:4px!important;
  align-content:center!important;
}

.top .row:first-child .box:nth-child(1) .s-ok,
.top .row:first-child .box:nth-child(1) .s-bad{
  line-height:.92!important;
  margin:0!important;
  padding:0!important;
  align-items:center!important;
}

/* v17：✅ ❌ 间距再增加一点点 */
.top .row:first-child .box:nth-child(1) .sbox{
  row-gap:4px!important;
}

.top .row:first-child .box:nth-child(1) .s-ok,
.top .row:first-child .box:nth-child(1) .s-bad{
  line-height:.95!important;
}

/* v18：✅ ❌ 和后面表情整体放大，间距不变 */
.top .row:first-child .box:nth-child(1) .s-ok,
.top .row:first-child .box:nth-child(1) .s-bad{
  font-size:13.5px!important;
  letter-spacing:-1px!important;
  line-height:.95!important;
}

/* v19：状态表情完整显示，左格稍微加宽 */
.top .row:first-child{
  grid-template-columns:minmax(0,1.18fr) max-content minmax(0,.92fr)!important;
}

.top .row:first-child .box:nth-child(1){
  padding-left:2px!important;
  padding-right:2px!important;
}

.top .row:first-child .box:nth-child(1) .sbox{
  grid-template-columns:auto minmax(0,1fr)!important;
  column-gap:2px!important;
}

.top .row:first-child .box:nth-child(1) .s-title{
  font-size:8px!important;
  letter-spacing:-.8px!important;
}

.top .row:first-child .box:nth-child(1) .s-ok,
.top .row:first-child .box:nth-child(1) .s-bad{
  font-size:12.2px!important;
  letter-spacing:-1.15px!important;
  line-height:.95!important;
  white-space:nowrap!important;
  overflow:visible!important;
}

/* v20：服务器利用率右侧三行压缩间距，完整显示 */
.top .row:first-child .box:nth-child(3) .ubox{
  height:100%!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  align-items:center!important;
  column-gap:3px!important;
}

.top .row:first-child .box:nth-child(3) .u-title{
  font-size:8px!important;
  letter-spacing:-.7px!important;
  white-space:nowrap!important;
}

.top .row:first-child .box:nth-child(3) .u-list{
  height:auto!important;
  display:grid!important;
  grid-template-rows:auto auto auto!important;
  align-content:center!important;
  justify-items:center!important;
  row-gap:1px!important;
}

.top .row:first-child .box:nth-child(3) .u-list div{
  width:100%!important;
  font-size:7px!important;
  line-height:.82!important;
  letter-spacing:-.65px!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-align:center!important;
}

/* v21：服务器利用率右侧三行稍微放大 */
.top .row:first-child .box:nth-child(3) .u-list div{
  font-size:7.6px!important;
  line-height:.88!important;
  letter-spacing:-.55px!important;
  row-gap:1px!important;
}

.top .row:first-child .box:nth-child(3) .u-list{
  row-gap:1px!important;
}

/* v23：第一行去掉上下空隙，第三行时钟自动铺满 */
.top .row:first-child{
  padding-top:0!important;
  padding-bottom:0!important;
  align-items:center!important;
}

.top .row:first-child .box{
  min-height:0!important;
  height:46px!important;
  padding-top:0!important;
  padding-bottom:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

.top .row:first-child .sbox,
.top .row:first-child .tbox,
.top .row:first-child .ubox{
  height:100%!important;
  width:100%!important;
  align-items:center!important;
}

.top .row:first-child .s-title,
.top .row:first-child .s-ok,
.top .row:first-child .s-bad,
.top .row:first-child .t-title,
.top .row:first-child .t-time,
.top .row:first-child .u-title,
.top .row:first-child .u-list div{
  margin:0!important;
  padding:0!important;
}

/* 第三行三个时钟自动铺满 */
.top .row:nth-child(3) .box{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  align-items:center!important;
  justify-content:stretch!important;
  gap:6px!important;
  padding-left:4px!important;
  padding-right:4px!important;
}

.top .row:nth-child(3) .clock-text{
  width:100%!important;
  min-width:0!important;
}

.top .row:nth-child(3) .label,
.top .row:nth-child(3) .big,
.top .row:nth-child(3) .small{
  width:100%!important;
  max-width:100%!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-align:center!important;
}

/* v24：第三行内容自动放大铺满格子 */
.top .row:nth-child(3) .box{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  align-items:center!important;
  justify-content:stretch!important;
  gap:7px!important;
}

.top .row:nth-child(3) .clock-text{
  width:100%!important;
  min-width:0!important;
}

.top .row:nth-child(3) .label,
.top .row:nth-child(3) .big,
.top .row:nth-child(3) .small{
  width:100%!important;
  max-width:100%!important;
  text-align:center!important;
}

/* v25：第三行文字完整显示，不裁剪 */
.top .row:nth-child(3) .label,
.top .row:nth-child(3) .big,
.top .row:nth-child(3) .small{
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
}

.top .row:nth-child(3) .clock-text{
  min-width:0!important;
  width:100%!important;
}