/* ============================================================
   服务器状态监控 · 二次元樱色梦幻主题
   ============================================================ */
:root {
  --bg-1: #1b1033;
  --bg-2: #2c1450;
  --bg-3: #3a1750;

  --glass: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
  --glass-border: rgba(255, 182, 240, 0.22);
  --text: #ffffff;
  --muted: rgba(255, 235, 250, 0.68);
  --track: rgba(255, 255, 255, 0.14);

  --pink: #ff8ec7;
  --pink-strong: #ff5fa8;
  --purple: #b388ff;
  --purple-strong: #8b5cf6;
  --blue: #7cd4fd;
  --mint: #7ef0c0;

  --cpu: #7cd4fd;
  --mem: #c9a2ff;
  --disk: #ffb37a;
  --load: #ff9ecb;
  --up: #ffd166;
  --down: #7ef0c0;

  --radius: 22px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100%;
  font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 15% 12%, rgba(255, 142, 199, 0.22), transparent 42%),
    radial-gradient(circle at 85% 18%, rgba(179, 136, 255, 0.22), transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(124, 212, 253, 0.18), transparent 55%),
    linear-gradient(160deg, var(--bg-1) 0%, var(--bg-2) 55%, var(--bg-3) 100%);
  background-attachment: fixed;
}

/* ---------- 背景图层 ---------- */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 20%, rgba(255, 142, 199, 0.20) 0%, transparent 38%),
    radial-gradient(circle at 90% 80%, rgba(124, 212, 253, 0.15) 0%, transparent 38%),
    linear-gradient(160deg, var(--bg-1) 0%, var(--bg-2) 60%, var(--bg-3) 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 0.8s ease;
}

/* 星空闪烁 */
.bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 20% 30%, rgba(255, 255, 255, 0.85), transparent),
    radial-gradient(1.6px 1.6px at 70% 65%, rgba(255, 214, 240, 0.9), transparent),
    radial-gradient(1.4px 1.4px at 45% 82%, rgba(200, 225, 255, 0.85), transparent),
    radial-gradient(1.8px 1.8px at 85% 25%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1.4px 1.4px at 33% 12%, rgba(255, 220, 245, 0.9), transparent),
    radial-gradient(1.6px 1.6px at 60% 45%, rgba(255, 255, 255, 0.75), transparent),
    radial-gradient(1.4px 1.4px at 12% 68%, rgba(214, 224, 255, 0.8), transparent);
  opacity: 0.8;
  animation: twinkle 5s ease-in-out infinite alternate;
}

.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(16, 6, 34, 0.55) 0%, rgba(28, 10, 52, 0.42) 60%, rgba(24, 8, 48, 0.55) 100%);
  backdrop-filter: blur(2px) saturate(1.1);
  -webkit-backdrop-filter: blur(2px) saturate(1.1);
}

@keyframes twinkle {
  from { opacity: 0.45; }
  to   { opacity: 0.95; }
}

/* ---------- 飘落樱花 ---------- */
.petals {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.petals span {
  position: absolute;
  top: -10vh;
  width: 14px;
  height: 14px;
  background: radial-gradient(circle at 30% 30%, #ffe1f0, #ff9ecd 70%, #ff7dbb);
  border-radius: 12px 0 12px 0;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(255, 140, 200, 0.55));
  animation: fall linear infinite;
}

.petals span:nth-child(1) { left: 8%;  width: 12px; height: 12px; animation-duration: 11s; animation-delay: 0s; }
.petals span:nth-child(2) { left: 24%; width: 16px; height: 16px; animation-duration: 14s; animation-delay: 2s; }
.petals span:nth-child(3) { left: 40%; width: 10px; height: 10px; animation-duration: 9s;  animation-delay: 4s; }
.petals span:nth-child(4) { left: 58%; width: 14px; height: 14px; animation-duration: 13s; animation-delay: 1s; }
.petals span:nth-child(5) { left: 72%; width: 13px; height: 13px; animation-duration: 10s; animation-delay: 5s; }
.petals span:nth-child(6) { left: 86%; width: 17px; height: 17px; animation-duration: 15s; animation-delay: 3s; }
.petals span:nth-child(7) { left: 15%; width: 9px;  height: 9px;  animation-duration: 16s; animation-delay: 6s; }
.petals span:nth-child(8) { left: 65%; width: 13px; height: 13px; animation-duration: 12s; animation-delay: 7.5s; }

@keyframes fall {
  0%   { top: -10vh; transform: translateX(0) rotate(0deg);        opacity: 0; }
  10%  { opacity: 0.85; }
  50%  { transform: translateX(44px) rotate(180deg); }
  90%  { opacity: 0.85; }
  100% { top: 110vh; transform: translateX(-32px) rotate(360deg);  opacity: 0; }
}

/* ---------- 布局 ---------- */
.wrap {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 18px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.topbar h1 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1px;
  background: linear-gradient(90deg, #ffd9ef 0%, #ff8ec7 30%, #b388ff 60%, #7cd4fd 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 6s linear infinite;
  filter: drop-shadow(0 0 14px rgba(255, 140, 200, 0.35));
}

@keyframes shimmer {
  from { background-position: 0% 50%; }
  to   { background-position: 220% 50%; }
}

.update {
  font-size: 12px;
  color: var(--muted);
  background: rgba(255, 142, 199, 0.12);
  border: 1px solid rgba(255, 182, 240, 0.28);
  padding: 5px 12px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 14px rgba(255, 120, 190, 0.18);
}

/* ---------- 顶部四张统计卡片 ---------- */
.summary-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.summary-card {
  position: relative;
  overflow: hidden;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 16px;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 8px 30px rgba(20, 6, 40, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.summary-card::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 142, 199, 0.35), transparent 70%);
  pointer-events: none;
}

.summary-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 182, 240, 0.45);
  box-shadow: 0 14px 38px rgba(255, 110, 180, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.sc-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.sc-title {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.3px;
}

.sc-label {
  font-size: 10px;
  color: #ffe3f2;
  background: linear-gradient(135deg, rgba(255, 142, 199, 0.30), rgba(179, 136, 255, 0.30));
  border: 1px solid rgba(255, 182, 240, 0.35);
  padding: 2px 8px;
  border-radius: 999px;
}

.sc-value {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 4px;
  text-shadow: 0 0 16px rgba(255, 140, 200, 0.28);
}

.sc-sub {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 10px;
  min-height: 16px;
}

.sc-bar {
  height: 5px;
  background: var(--track);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.sc-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pink-strong), var(--purple), var(--blue));
  box-shadow: 0 0 10px rgba(255, 120, 190, 0.55);
  transition: width 0.4s ease;
}

/* 累计流量为累计值、无固定上限，不显示底部进度条；数据行下移到进度条所在位置带，底部不再空旷 */
.summary-card[data-key="cumulative"] .sc-bar {
  display: none;
}
.summary-card[data-key="cumulative"] .sc-sub {
  margin-top: 14px;
  margin-bottom: 0;
}

/* ---------- 主卡片容器 ---------- */
#main-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 18px;
}

.main-card {
  position: relative;
  overflow: hidden;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 28px;
  padding: 24px;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 10px 34px rgba(20, 6, 40, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  min-width: 0;
  animation: cardIn 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.main-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(255, 142, 199, 0.20), transparent 45%);
  pointer-events: none;
}

.main-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 214, 240, 0.75), transparent);
  pointer-events: none;
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(14px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
}

.flag {
  width: 26px;
  height: 18px;
  border-radius: 4px;
  background: #de2910;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(255, 100, 150, 0.35);
}

.flag::after {
  content: "★";
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: #ffde00;
  font-size: 12px;
}

.card-title {
  font-size: 20px;
  font-weight: 800;
  flex: 1;
  letter-spacing: 0.5px;
  text-shadow: 0 0 18px rgba(255, 140, 200, 0.28);
}

.icon-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 142, 199, 0.28), rgba(179, 136, 255, 0.28));
  border: 1px solid rgba(255, 182, 240, 0.35);
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 0 14px rgba(255, 120, 190, 0.28);
}

.icon-btn svg { width: 16px; height: 16px; }

.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 16px;
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
}

.metric {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 182, 240, 0.12);
  border-radius: 18px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.metric:hover {
  border-color: rgba(255, 182, 240, 0.32);
  box-shadow: 0 0 20px rgba(255, 110, 180, 0.16);
}

.metric-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 2px;
  column-gap: 8px;
  margin-bottom: 6px;
}

.metric-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

.metric-name svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--pink);
  filter: drop-shadow(0 0 5px rgba(255, 140, 200, 0.5));
}

.metric-value {
  font-size: 22px;
  font-weight: 800;
  white-space: nowrap;
  text-shadow: 0 0 14px rgba(255, 140, 200, 0.25);
}

.metric-sub {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
  min-height: 16px;
}

.metric-no-bar .metric-sub {
  margin-top: auto;
}

/* ---------- 进度条 ---------- */
.segments {
  height: 8px;
  background: var(--track);
  border-radius: 999px;
  overflow: hidden;
  margin-top: auto;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.segments::after {
  content: "";
  display: block;
  height: 100%;
  border-radius: 999px;
  width: var(--fill, 0%);
  transition: width 1s cubic-bezier(0.22, 0.61, 0.36, 1);
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 60%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: sheen 2.8s linear infinite;
}

@keyframes sheen {
  from { background-position: 200% 0; }
  to   { background-position: -120% 0; }
}

.segments.cpu::after  { background-color: var(--cpu);  box-shadow: 0 0 12px var(--cpu); }
.segments.mem::after  { background-color: var(--mem);  box-shadow: 0 0 12px var(--mem); }
.segments.disk::after { background-color: var(--disk); box-shadow: 0 0 12px var(--disk); }
.segments.load::after { background-color: var(--load); box-shadow: 0 0 12px var(--load); }
.segments.up::after   { background-color: var(--up);   box-shadow: 0 0 12px var(--up); }
.segments.down::after { background-color: var(--down); box-shadow: 0 0 12px var(--down); }

/* ---------- 网络区域 ---------- */
.network-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}

.net-col {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 182, 240, 0.12);
  border-radius: 18px;
  padding: 14px;
}

.net-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}

.net-head svg { width: 16px; height: 16px; }

.net-value {
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 10px;
}

.net-up {
  color: var(--up);
  text-shadow: 0 0 16px rgba(255, 209, 102, 0.45);
}
.net-down {
  color: var(--down);
  text-shadow: 0 0 16px rgba(126, 240, 192, 0.45);
}

.dotted-line {
  position: relative;
  height: 7px;
  border-radius: 4px;
  background: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, 0.28) 0px,
    rgba(255, 255, 255, 0.28) 4px,
    transparent 4px,
    transparent 10px);
}

.dotted-line .dot {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: left 0.3s ease;
}

.dotted-line .dot.up { background: var(--up); box-shadow: 0 0 10px var(--up); }
.dotted-line .dot.down { background: var(--down); box-shadow: 0 0 10px var(--down); }

.net-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  margin-top: 8px;
}

.pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--down);
  box-shadow: 0 0 6px var(--down);
  animation: pulse 1.4s infinite;
}

@keyframes pulse {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
  100% { opacity: 1; transform: scale(1); }
}

/* ---------- 出入站流量 ---------- */
.traffic-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}

.traffic-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 182, 240, 0.12);
  border-radius: 16px;
  padding: 12px 14px;
}

.traffic-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

.traffic-left svg { width: 16px; height: 16px; }

.traffic-value {
  font-size: 16px;
  font-weight: 700;
  text-shadow: 0 0 12px rgba(255, 140, 200, 0.2);
}

/* ---------- 剩余流量（备用） ---------- */
.remaining {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 182, 240, 0.12);
  border-radius: 16px;
  padding: 14px;
}

.remaining-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.remaining-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}

.remaining-label svg { width: 16px; height: 16px; }

.remaining-value { font-size: 18px; font-weight: 700; }

.remaining-sub {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 8px;
}

.remaining-bar {
  height: 8px;
  background: var(--track);
  border-radius: 999px;
  overflow: hidden;
}

.remaining-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--down), var(--up));
  transition: width 0.4s ease;
}

/* ---------- 错误提示 ---------- */
.error-msg {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fecaca;
  padding: 14px;
  border-radius: 16px;
  text-align: center;
  font-size: 13px;
  position: relative;
  z-index: 1;
}

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  #main-card { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .summary-cards { grid-template-columns: repeat(2, 1fr); }
  .metric-grid { grid-template-columns: repeat(2, 1fr); gap: 10px 8px; }
  .network-row { grid-template-columns: 1fr; }
  .traffic-row { grid-template-columns: 1fr; }
  .topbar h1 { font-size: 18px; }
  .petals span:nth-child(n+6) { display: none; }
}

/* 屏幕特别小时：整体等比缩小（类似浏览器/系统缩放），布局不变、内容不被挤压 */
@media (max-width: 520px) {
  .wrap {
    zoom: 0.75;
    /* 注意：zoom 元素内部的百分比已按缩放系数换算，width 用 100% 即为满宽；
       若再除以缩放系数会导致整体超出屏幕、需要左右滑动 */
    width: 100%;
  }
}

/* 更窄的屏幕再退化为标题/数值上下两行，避免标题被拆字 */
@media (max-width: 400px) {
  .metric-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .metric-name { font-size: 12px; }
  .metric-value { font-size: 20px; line-height: 1.15; }
  .metric-sub { margin-bottom: 8px; }
}