*{box-sizing:border-box;}
/* 全局背景 - 二次元星空 */
body[data-current-page="monitor"]{background:url('/assets/image/backgroundPicture.jpg') center/cover fixed;background-color:#0a0a1a;}
body[data-current-page="monitor"] .content{padding-top:64px!important;background:linear-gradient(180deg,rgba(10,10,35,0.70) 0%,rgba(20,12,40,0.70) 40%,rgba(15,10,30,0.70) 100%);min-height:100vh;}
body[data-current-page="monitor"] .navbar{position:fixed;top:0;left:0;right:0;width:100%;z-index:20;background:rgba(15,10,30,0.3);backdrop-filter:blur(120px);-webkit-backdrop-filter:blur(120px);border-bottom:1px solid rgba(180,140,255,0.08);}
.monitor-page{max-width:1500px;margin:0 auto;padding:16px 16px 24px;font-family:'Segoe UI','Mochiy Pop One',-apple-system,sans-serif;color:#d8d8f0;}

/* 标题 */
.monitor-header{text-align:center;margin-bottom:16px;padding:12px 0;position:relative;}
.monitor-header::after{content:'✦';position:absolute;top:-4px;right:10%;font-size:1rem;animation:twinkle 2s ease-in-out infinite;color:#f0c060;}
.monitor-header::before{content:'✦';position:absolute;top:-8px;left:10%;font-size:0.8rem;animation:twinkle 2.5s ease-in-out 0.5s infinite;color:#c0a0f0;}
@keyframes twinkle{0%,100%{opacity:0.3;transform:scale(0.8);}50%{opacity:1;transform:scale(1.2);}}
.monitor-header h1{font-size:1.5rem;font-weight:700;margin:0 0 4px;text-shadow:0 0 20px rgba(180,140,255,0.4);}
.monitor-header .title-icon{width:28px;height:28px;vertical-align:middle;display:inline-block;animation:float 3s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.monitor-header .title-text{background:linear-gradient(135deg,#fbbf24,#f472b6,#a78bfa,#38bdf8,#4ade80);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-size:300% 300%;animation:shimmer 4s ease-in-out infinite;text-shadow:none;filter:drop-shadow(0 0 8px rgba(255,255,255,0.2));}
@keyframes shimmer{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
.monitor-header .monitor-time{color:#e8e0ff;font-size:0.78rem;margin:0;text-shadow:0 0 10px rgba(200,180,255,0.4);}

.monitor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px;margin-bottom:12px;}

/* 基础卡片 */
.monitor-card{background:rgba(30,20,60,0.7);border:1px solid rgba(200,160,255,0.18);border-radius:14px;padding:14px 16px;position:relative;overflow:hidden;transition:all 0.4s cubic-bezier(0.25,0.8,0.25,1.2);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);}
.monitor-card::after{content:'';position:absolute;top:-50%;right:-50%;width:140px;height:140px;border-radius:50%;opacity:0.06;pointer-events:none;transition:all 0.6s;}
.monitor-card:hover{transform:translateY(-3px);}
.monitor-card:hover::after{top:-15%;right:-15%;width:220px;height:220px;opacity:0.12;}
.monitor-card.full-width{grid-column:1/-1;}

/* 卡片标题 */
.monitor-card-title{display:flex;align-items:center;gap:8px;font-size:0.82rem;font-weight:700;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,0.1);letter-spacing:0.5px;position:relative;z-index:1;}
.monitor-card-title .icon{font-size:1.1rem;display:inline-block;}

.monitor-stat-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:0.8rem;position:relative;z-index:1;}
.monitor-stat-label{font-size:0.76rem;opacity:0.7;}
.monitor-stat-value{font-weight:600;font-variant-numeric:tabular-nums;}

.monitor-progress{margin:6px 0 2px;position:relative;z-index:1;}
.monitor-progress-bar{height:4px;border-radius:3px;background:rgba(255,255,255,0.1);overflow:hidden;}
.monitor-progress-fill{height:100%;border-radius:3px;transition:width 0.8s ease;}

/* 面积折线图 */
.chart-header{display:flex;align-items:center;gap:14px;margin-bottom:4px;font-size:0.72rem;color:rgba(200,200,240,0.6);flex-wrap:wrap;position:relative;z-index:1;}
.chart-stat{display:flex;align-items:center;gap:4px;white-space:nowrap;}
.chart-stat b{color:#e0e0f0;font-size:0.82rem;margin-left:2px;font-weight:600;}
.chart-stat.right{margin-left:auto;}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;}
.dot.green{background:#4ade80;box-shadow:0 0 8px rgba(74,222,128,0.6);}
.dot.orange{background:#fb923c;box-shadow:0 0 8px rgba(251,146,60,0.6);}
.dot.pink{background:#c084fc;box-shadow:0 0 8px rgba(192,132,252,0.6);}
.dot.blue{background:#38bdf8;box-shadow:0 0 8px rgba(56,189,248,0.6);}
.area-chart{width:100%;height:160px;display:block;border-radius:4px;position:relative;z-index:1;}

.monitor-pre{background:rgba(0,0,0,0.4);border-radius:8px;padding:10px 12px;font-size:0.7rem;font-family:'JetBrains Mono','SF Mono','Fira Code',monospace;line-height:1.4;overflow-x:auto;max-height:200px;overflow-y:auto;white-space:pre-wrap;word-break:break-all;position:relative;z-index:1;}
.monitor-tags{display:flex;flex-wrap:wrap;gap:6px;position:relative;z-index:1;}
.monitor-tag{padding:3px 10px;border-radius:12px;font-size:0.7rem;font-weight:600;}
.monitor-error{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:50vh;text-align:center;padding:40px;}
.monitor-error .error-icon{font-size:4rem;margin-bottom:20px;}
.monitor-error h2{color:#f5576c;margin-bottom:12px;}
.monitor-error p{color:#999;max-width:500px;line-height:1.6;}
.monitor-error code{background:rgba(255,255,255,0.1);padding:2px 8px;border-radius:4px;color:#f5576c;}

/* ══════════════════════════════════════════
   1️⃣ CPU - 赛博朋克紫霓虹 Cyberpunk Violet
   ══════════════════════════════════════════ */
#cpuCard{background:linear-gradient(145deg,rgba(220,60,120,0.35) 0%,rgba(190,40,100,0.3) 100%);border-color:rgba(240,130,170,0.35);border-left:3px solid #ec4899;}
#cpuCard::after{background:radial-gradient(circle,rgba(236,72,153,0.4),transparent);}
#cpuCard:hover{border-color:rgba(236,72,153,0.6);box-shadow:0 8px 32px rgba(236,72,153,0.2);}
#cpuCard .monitor-card-title{color:#fce7f3;}
#cpuCard .monitor-stat-value{color:#fdf2f8;}
#cpuCard .monitor-progress-fill.green{background:linear-gradient(90deg,#f472b6,#ec4899);box-shadow:0 0 12px rgba(244,114,182,0.6);}
#cpuCard .monitor-progress-fill.yellow{background:linear-gradient(90deg,#fbbf24,#f59e0b);box-shadow:0 0 12px rgba(251,191,36,0.6);}
#cpuCard .monitor-progress-fill.red{background:linear-gradient(90deg,#f87171,#ef4444);box-shadow:0 0 12px rgba(248,113,113,0.6);}

/* ══════════════════════════════════════════
   2️⃣ 内存 - 樱花粉 Sakura Pink
   ══════════════════════════════════════════ */
#memCard{background:linear-gradient(145deg,rgba(240,140,170,0.3) 0%,rgba(230,120,155,0.25) 100%);border-color:rgba(255,180,200,0.35);border-left:3px solid #fba1b7;}
#memCard::after{background:radial-gradient(circle,rgba(251,161,183,0.4),transparent);}
#memCard:hover{border-color:rgba(251,161,183,0.6);box-shadow:0 8px 32px rgba(251,161,183,0.2);}
#memCard .monitor-card-title{color:#ffe4ec;}
#memCard .monitor-stat-value{color:#fff0f5;}
#memCard .monitor-progress-fill.green{background:linear-gradient(90deg,#fba1b7,#f472b6);box-shadow:0 0 12px rgba(251,161,183,0.6);}
#memCard .monitor-progress-fill.yellow{background:linear-gradient(90deg,#fbbf24,#f59e0b);box-shadow:0 0 12px rgba(251,191,36,0.6);}
#memCard .monitor-progress-fill.red{background:linear-gradient(90deg,#f87171,#ef4444);box-shadow:0 0 12px rgba(248,113,113,0.6);}

/* ══════════════════════════════════════════
   3️⃣ 磁盘 - 魔法少女金 Magical Gold
   ══════════════════════════════════════════ */
#diskCard{background:linear-gradient(145deg,rgba(230,140,40,0.3) 0%,rgba(210,120,30,0.25) 100%);border-color:rgba(252,180,50,0.35);border-left:3px solid #fbbf24;}
#diskCard::after{background:radial-gradient(circle,rgba(251,191,36,0.4),transparent);}
#diskCard:hover{border-color:rgba(251,191,36,0.6);box-shadow:0 8px 32px rgba(251,191,36,0.2);}
#diskCard .monitor-card-title{color:#fef3c7;}
#diskCard .monitor-stat-value{color:#fff8e0;}
#diskCard .monitor-progress-fill.green{background:linear-gradient(90deg,#fbbf24,#f59e0b);box-shadow:0 0 12px rgba(251,191,36,0.6);}
#diskCard .monitor-progress-fill.yellow{background:linear-gradient(90deg,#f59e0b,#d97706);box-shadow:0 0 12px rgba(245,158,11,0.6);}
#diskCard .monitor-progress-fill.red{background:linear-gradient(90deg,#f87171,#ef4444);box-shadow:0 0 12px rgba(248,113,113,0.6);}

/* ══════════════════════════════════════════
   4️⃣ 系统 - 星海深蓝 Starry Navy
   ══════════════════════════════════════════ */
#sysCard{background:linear-gradient(145deg,rgba(50,100,220,0.35) 0%,rgba(40,80,200,0.3) 100%);border-color:rgba(120,160,255,0.35);border-left:3px solid #4f6ef6;}
#sysCard::after{background:radial-gradient(circle,rgba(79,110,246,0.4),transparent);}
#sysCard:hover{border-color:rgba(79,110,246,0.6);box-shadow:0 8px 32px rgba(79,110,246,0.2);}
#sysCard .monitor-card-title{color:#d0dbfe;}
#sysCard .monitor-stat-value{color:#e8ecff;}

/* ══════════════════════════════════════════
   5️⃣ 网络I/O图表 - 机甲银灰 Mecha Silver
   ══════════════════════════════════════════ */
#netChartCard{background:linear-gradient(145deg,rgba(30,170,140,0.3) 0%,rgba(20,150,120,0.25) 100%)!important;border-color:rgba(80,210,180,0.35)!important;border-left:3px solid #26a69a!important;}
#netChartCard::after{background:radial-gradient(circle,rgba(38,166,154,0.4),transparent);}
#netChartCard:hover{border-color:rgba(38,166,154,0.6)!important;box-shadow:0 8px 32px rgba(38,166,154,0.2);}

/* ══════════════════════════════════════════
   8️⃣ 磁盘I/O图表 - 异世界紫 Isekai Purple
   ══════════════════════════════════════════ */
#diskChartCard{background:linear-gradient(145deg,rgba(180,100,220,0.3) 0%,rgba(160,80,200,0.25) 100%)!important;border-color:rgba(210,170,255,0.35)!important;border-left:3px solid #c084fc!important;}
#diskChartCard::after{background:radial-gradient(circle,rgba(192,132,252,0.4),transparent);}
#diskChartCard:hover{border-color:rgba(192,132,252,0.6)!important;box-shadow:0 8px 32px rgba(192,132,252,0.2);}

/* ══════════════════════════════════════════
   CPU/内存曲线 - 霓虹青紫 Neon Cyan-Purple
   ══════════════════════════════════════════ */
#cpumemChartCard{background:linear-gradient(145deg,rgba(40,120,180,0.3) 0%,rgba(120,60,200,0.28) 100%)!important;border-color:rgba(120,180,255,0.35)!important;border-left:3px solid #38bdf8!important;}
#cpumemChartCard::after{background:radial-gradient(circle,rgba(56,189,248,0.4),transparent);}
#cpumemChartCard:hover{border-color:rgba(56,189,248,0.6)!important;box-shadow:0 8px 32px rgba(56,189,248,0.2);}

/* ══════════════════════════════════════════
   9️⃣ 交换内存 - 冰晶蓝 Ice Crystal
   ══════════════════════════════════════════ */
#swapCard{background:linear-gradient(145deg,rgba(168,85,247,0.3) 0%,rgba(140,60,230,0.25) 100%);border-color:rgba(190,130,255,0.35);border-left:3px solid #a855f7;}
#swapCard::after{background:radial-gradient(circle,rgba(168,85,247,0.4),transparent);}
#swapCard:hover{border-color:rgba(168,85,247,0.6);box-shadow:0 8px 32px rgba(168,85,247,0.2);}
#swapCard .monitor-card-title{color:#e9d5ff;}
#swapCard .monitor-stat-value{color:#f3e8ff;}
#swapCard .monitor-progress-fill.green{background:linear-gradient(90deg,#c084fc,#a855f7);box-shadow:0 0 12px rgba(168,85,247,0.6);}
#swapCard .monitor-progress-fill.yellow{background:linear-gradient(90deg,#fbbf24,#f59e0b);box-shadow:0 0 12px rgba(251,191,36,0.6);}
#swapCard .monitor-progress-fill.red{background:linear-gradient(90deg,#f87171,#ef4444);box-shadow:0 0 12px rgba(248,113,113,0.6);}

/* ══════════════════════════════════════════
   1️⃣0️⃣ 进程统计 - 炎之红 Flame Crimson
   ══════════════════════════════════════════ */
#procStatCard{background:linear-gradient(145deg,rgba(240,110,130,0.3) 0%,rgba(220,90,110,0.25) 100%);border-color:rgba(250,140,160,0.35);border-left:3px solid #fb7185;}
#procStatCard::after{background:radial-gradient(circle,rgba(251,113,133,0.4),transparent);}
#procStatCard:hover{border-color:rgba(251,113,133,0.6);box-shadow:0 8px 32px rgba(251,113,133,0.2);}
#procStatCard .monitor-card-title{color:#ffe4e6;}
#procStatCard .monitor-stat-value{color:#fff1f2;}

/* ══════════════════════════════════════════
   1️⃣1️⃣ 数据库 - 黄金传说 Legendary Gold
   ══════════════════════════════════════════ */
#dbCard{background:linear-gradient(145deg,rgba(210,120,30,0.3) 0%,rgba(185,95,15,0.25) 100%);border-color:rgba(240,155,60,0.35);border-left:3px solid #d97706;}
#dbCard::after{background:radial-gradient(circle,rgba(217,119,6,0.4),transparent);}
#dbCard:hover{border-color:rgba(217,119,6,0.6);box-shadow:0 8px 32px rgba(217,119,6,0.2);}
#dbCard .monitor-card-title{color:#fef3c7;}
#dbCard .monitor-stat-value{color:#fffbeb;}

/* ══════════════════════════════════════════
   1️⃣2️⃣ 网站文件 - 森系龙猫绿 Totoro Forest
   ══════════════════════════════════════════ */
#siteCard{background:linear-gradient(145deg,rgba(100,210,80,0.3) 0%,rgba(80,190,60,0.25) 100%);border-color:rgba(150,240,130,0.35);border-left:3px solid #66bb6a;}
#siteCard::after{background:radial-gradient(circle,rgba(102,187,106,0.4),transparent);}
#siteCard:hover{border-color:rgba(102,187,106,0.6);box-shadow:0 8px 32px rgba(102,187,106,0.2);}
#siteCard .monitor-card-title{color:#e8f5e9;}
#siteCard .monitor-stat-value{color:#f1f8e9;}

/* ══════════════════════════════════════════
   1️⃣3️⃣ TOP进程 - 暗黑哥特 Dark Gothic
   ══════════════════════════════════════════ */
#procCard{background:linear-gradient(145deg,rgba(8,8,18,0.97) 0%,rgba(12,12,25,0.93) 100%);border-color:rgba(148,163,184,0.15);border-left:3px solid #64748b;}
#procCard::after{background:radial-gradient(circle,#64748b,transparent);}
#procCard:hover{border-color:rgba(148,163,184,0.35);box-shadow:0 8px 32px rgba(100,116,139,0.1);}
#procCard .monitor-card-title{color:#94a3b8;}
#procCard .monitor-pre{color:#b0b0d0;border:1px solid rgba(148,163,184,0.08);}

/* ══════════════════════════════════════════
   1️⃣4️⃣ 关键服务 - 彩虹色 Rainbow Spectrum
   ══════════════════════════════════════════ */
#svcGrid .monitor-card{
  background:linear-gradient(145deg,rgba(20,18,35,0.95) 0%,rgba(25,20,40,0.9) 100%);
  border-color:rgba(244,114,182,0.2);
  border-left:3px solid transparent;
  border-image:linear-gradient(180deg,#f472b6,#c084fc,#38bdf8,#4ade80) 1;
}
#svcGrid .monitor-card::after{background:radial-gradient(circle,#f472b6,transparent);}
#svcGrid .monitor-card:hover{box-shadow:0 8px 32px rgba(244,114,182,0.12);}
#svcGrid .monitor-card .monitor-card-title{background:linear-gradient(90deg,#f472b6,#c084fc,#38bdf8,#4ade80);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
#svcGrid .monitor-tag.active{background:rgba(74,222,128,0.15);color:#4ade80;border:1px solid rgba(74,222,128,0.3);box-shadow:0 0 8px rgba(74,222,128,0.15);}
#svcGrid .monitor-tag.inactive{background:rgba(239,68,68,0.1);color:#f87171;border:1px solid rgba(239,68,68,0.2);}

/* ══════════════════════════════════════════
   1️⃣5️⃣ 磁盘分区 - 极光 Aurora Borealis
   ══════════════════════════════════════════ */
#diskPartGrid .monitor-card{background:linear-gradient(145deg,rgba(40,150,210,0.3) 0%,rgba(30,130,190,0.25) 100%);border-color:rgba(100,190,240,0.35);border-left:3px solid #42a5f5;}
#diskPartGrid .monitor-card::after{background:radial-gradient(circle,rgba(66,165,245,0.4),transparent);}
#diskPartGrid .monitor-card:hover{border-color:rgba(66,165,245,0.6);box-shadow:0 8px 32px rgba(66,165,245,0.2);}
#diskPartGrid .monitor-card .monitor-card-title{color:#bbdefb;}
#diskPartGrid .monitor-pre{background:rgba(15,60,120,0.35);color:#c8dff0;border:1px solid rgba(100,170,230,0.2);}

/* 响应式 */
@media(max-width:768px){
    body[data-current-page="monitor"] .content{padding-top:56px!important;}
    .monitor-page{padding:8px 8px 16px;}
    .monitor-header h1{font-size:1.2rem;}
    .monitor-grid{grid-template-columns:1fr 1fr;gap:8px;}
    .monitor-card{padding:10px 12px;border-radius:12px;}
    .monitor-card-title{font-size:0.7rem;margin-bottom:6px;padding-bottom:5px;gap:4px;}
    .monitor-card-title .icon{font-size:0.85rem;}
    .monitor-stat-row{font-size:0.7rem;padding:3px 0;}
    .monitor-stat-label{font-size:0.68rem;}
    .monitor-stat-value{font-size:0.7rem;}
    .monitor-pre{font-size:0.62rem;padding:8px 10px;max-height:150px;}
    .monitor-tag{font-size:0.65rem;padding:2px 8px;}
    .area-chart{height:110px;}
    .chart-header{font-size:0.65rem;gap:8px;}
    .chart-stat b{font-size:0.7rem;}
}
@media(max-width:480px){
    .monitor-grid{grid-template-columns:1fr;gap:6px;}
    .monitor-card{padding:8px 10px;}
    .monitor-card-title{font-size:0.68rem;}
}