正文
/ ========== 1. 日/夜配色：深空夜蓝 ========== / :root:not(.dark) { --light-bg-color: #0c111d; --light-card-bg-color: rgba(12, 17, 29, .35); --light-text-color: #e8eef5; --light-secondary-text-color: #7c8a9e; --light-border-color: rgba(255, 255, 255, .09); --light-progress-cpu-color: #cfe3ee; --light-progress-memory-color: #cfe3ee; --light-progress-disk-color: #cfe3ee; --light-progress-network-color: #cfe3ee; --light-progress-swap-color: #cfe3ee; }
:root.dark { --dark-bg-color: #060a13; --dark-card-bg-color: rgba(8, 12, 22, .38); --dark-text-color: #eaf1f8; --dark-secondary-text-color: #7c8a9e; --dark-border-color: rgba(255, 255, 255, .08); --dark-progress-cpu-color: #cfe3ee; --dark-progress-memory-color: #cfe3ee; --dark-progress-disk-color: #cfe3ee; --dark-progress-network-color: #cfe3ee; --dark-progress-swap-color: #cfe3ee; }
:root { --accent-base-color: #9fc3d6; --border-accent-color: rgba(207, 227, 238, .35); --progress-bg-color: rgba(255, 255, 255, .06);
--success-color: #8fd6b4; --warning-color: #e6c27a; --error-color: #e08a8a; --info-color: #9fc3d6;
--status-online-color: #cfe3ee; --status-offline-color: #5a6472;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow-md: 0 2px 10px rgba(0, 0, 0, .35); --shadow-lg: 0 8px 30px rgba(0, 0, 0, .45);
--theme-transition-duration: .25s; }
/ ========== 2. 全局字体：细衬线 / 宽字距小标签 ========== / body { font-family: "Georgia", "Times New Roman", "Songti SC", serif; letter-spacing: .01em; }
/ 大标题（页面名、服务器名）——斜体衬线，接近截图里的 "JP-MKCloud.IX" / .stat-hero-surface h1, .stat-hero-surface h2, [data-home-shell="1"] .server-card h2, [data-home-shell="1"] .server-card h3 { font-family: "Georgia", "Times New Roman", serif; font-style: italic; font-weight: 400; letter-spacing: .01em; }
/ 小标签（CPU / MEMORY / RESOURCES 这类全大写字）：交给通用类，若站点本身 已用 text-transform: uppercase 渲染，这里只加宽字距，不改结构 / .text-theme-secondary { letter-spacing: .12em; }
/ ========== 3. 卡片：直角、细边框、玻璃质感 ========== / [data-home-shell="1"][data-home-view="card"] .server-card { border-radius: 2px; border-color: var(--dark-border-color); box-shadow: none; }
[data-home-shell="1"][data-home-view="card"] .server-card:hover { box-shadow: 0 0 16px rgba(207, 227, 238, .12); border-color: var(--border-accent-color); }
[data-home-shell="1"][data-home-view="list"] .server-card { border-bottom-color: var(--dark-border-color); }
[data-home-shell="1"][data-home-view="list"] .server-card:hover { background: var(--hover-bg-color); }
.stat-hero-surface { border-radius: 2px; border-color: var(--dark-border-color); }
.glass-card, .surface-card { border-radius: 2px; }
/ ========== 4. 标签页：细线代替药丸底色，冰蓝色高亮当前项 ========== / .nav-tab { color: var(--dark-secondary-text-color); }
.nav-tab:hover { color: var(--dark-text-color); }
.nav-tab.active { color: var(--accent-base-color); }
/ ========== 5. 顶栏 / 下拉菜单 / 输入框 ========== / #main-navbar { border-bottom: 1px solid var(--dark-border-color); background: transparent; }
.nav-link-active { color: var(--accent-base-color); }
.dropdown-menu { border: 1px solid var(--dark-border-color); border-radius: 2px; background: rgba(6, 10, 19, .85); }
.dropdown-menu__item:hover { background: var(--hover-bg-color); }
input[type="text"], input[type="search"], textarea { border-radius: 2px; border: 1px solid var(--light-border-color); background: transparent; }
:root.dark input[type="text"], :root.dark input[type="search"], :root.dark textarea { border-color: var(--dark-border-color); background: transparent; }
/ ========== 6. 网络质量页 ========== / .network-quality-page .dashboard-card { border-radius: 2px; }
#nq-dashboard-hero-card { border-color: var(--border-accent-color); }
/ ========== 7. 页脚 + 壁纸滤镜（贴合夜空雪山的清冷感） ========== / #footer-wrapper { border-top: 1px solid var(--dark-border-color); }
#wallpaper-layer { filter: saturate(.75) brightness(.85) contrast(1.05); }