/* host.html - TDSI Server Status Monitor */
*{margin:0;padding:0;box-sizing:border-box}
:root {
    --primary-color: #3b82f6;
    --primary-light: #60a5fa;
    --primary-dark: #2563eb;
    --bg-primary: #ffffff;
    --bg-secondary: #f0f7ff;
    --bg-tertiary: #e0f2fe;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --border-color: rgba(59,130,246,0.1);
    --shadow-color: rgba(59,130,246,0.08);
    --success: #22c55e;
    --success-bg: rgba(34,197,94,0.1);
    --warning: #f59e0b;
    --warning-bg: rgba(245,158,11,0.1);
    --error: #ef4444;
    --error-bg: rgba(239,68,68,0.1);
    --card-bg: rgba(255,255,255,0.8);
}
/* 深色模式 */
@media (prefers-color-scheme: dark),body.dark-mode {
    :root {
        --primary-color: #D4AF37;
        --primary-light: #F0D060;
        --primary-dark: #B8960F;
        --bg-primary: #000000;
        --bg-secondary: #050505;
        --bg-tertiary: #080808;
        --text-primary: rgba(255,255,255,0.85);
        --text-secondary: rgba(255,255,255,0.5);
        --text-muted: rgba(255,255,255,0.3);
        --border-color: rgba(212,175,55,0.08);
        --shadow-color: rgba(0,0,0,0.5);
        --card-bg: rgba(0,0,0,0.5);
        --success: #22c55e;
        --success-bg: rgba(34,197,94,0.1);
        --warning: #f59e0b;
        --warning-bg: rgba(245,158,11,0.1);
        --error: #ef4444;
        --error-bg: rgba(239,68,68,0.1);
    }
}
body.dark-mode{background:var(--bg-primary)!important}
body{font-family:'Microsoft YaHei','PingFang SC','Segoe UI',sans-serif;background:linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-secondary) 30%,var(--bg-tertiary) 60%,var(--bg-secondary) 100%);color:var(--text-primary);min-height:100vh;padding-top:40px}
.container{max-width:1000px;margin:0 auto;padding:20px}

/* Overall Status Banner */
.status-banner{background:linear-gradient(135deg,#22c55e,#16a34a);border-radius:16px;padding:20px 30px;margin-bottom:20px;text-align:center;color:#fff}
.status-banner.warning{background:linear-gradient(135deg,#f59e0b,#d97706)}
.status-banner.error{background:linear-gradient(135deg,#ef4444,#dc2626)}
body.dark-mode .status-banner{background:linear-gradient(135deg,#22c55e,#16a34a);box-shadow:0 4px 20px rgba(34,197,94,0.2)}
body.dark-mode .status-banner.warning{background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 4px 20px rgba(245,158,11,0.2)}
body.dark-mode .status-banner.error{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 4px 20px rgba(239,68,68,0.2)}
.status-banner h1{font-size:20px;font-weight:700;margin-bottom:4px}
.status-banner p{font-size:13px;opacity:0.85}

/* Section */
.section{margin-bottom:24px}
.section-title{font-size:15px;font-weight:700;color:var(--text-primary);margin-bottom:12px;padding-left:12px;border-left:3px solid var(--primary-color);display:flex;align-items:center;gap:8px}
body.dark-mode .section-title{border-left-color:#D4AF37}
.section-title .count{font-weight:400;color:var(--text-muted);font-size:13px}

/* Status Grid */
.status-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}

/* Status Card */
.status-card{background:var(--card-bg);backdrop-filter:blur(20px);border:1px solid var(--border-color);border-radius:12px;padding:14px 16px;transition:all 0.3s;display:flex;align-items:center;gap:12px}
body.dark-mode .status-card{background:rgba(0,0,0,0.5);border-color:rgba(212,175,55,0.08)}
.status-card:hover{transform:translateY(-2px);border-color:var(--primary-color);box-shadow:0 8px 24px var(--shadow-color)}
body.dark-mode .status-card:hover{border-color:rgba(212,175,55,0.2);box-shadow:0 8px 24px rgba(0,0,0,0.4)}

/* Status Dot */
.status-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.status-dot.normal{background:var(--success);box-shadow:0 0 6px var(--success)}
.status-dot.retrying{background:var(--warning);box-shadow:0 0 6px var(--warning);animation:blink 1.2s infinite}
.status-dot.fault{background:var(--error);box-shadow:0 0 6px var(--error)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}

.status-info{flex:1;min-width:0}
.status-name{font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:2px}
.status-desc{font-size:11px;color:var(--text-muted)}

.status-meta{text-align:right;flex-shrink:0}
.status-latency{font-size:11px;font-weight:600;color:var(--text-secondary)}
.status-label{font-size:10px;padding:2px 8px;border-radius:10px;font-weight:600;display:inline-block;margin-top:2px}
.status-label.normal{background:var(--success-bg);color:var(--success)}
.status-label.retrying{background:var(--warning-bg);color:var(--warning)}
.status-label.fault{background:var(--error-bg);color:var(--error)}

/* Stats Bar */
.stats-bar{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.stat-item{flex:1;min-width:120px;background:var(--card-bg);backdrop-filter:blur(20px);border:1px solid var(--border-color);border-radius:12px;padding:14px;text-align:center}
body.dark-mode .stat-item{background:rgba(0,0,0,0.5);border-color:rgba(212,175,55,0.08)}
.stat-item .num{font-size:24px;font-weight:800;color:var(--text-primary)}
.stat-item .num.green{color:var(--success)}
.stat-item .num.yellow{color:var(--warning)}
.stat-item .num.red{color:var(--error)}
.stat-item .label{font-size:11px;color:var(--text-muted);margin-top:4px}

/* Buttons */
.btn-group{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border:none;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.3s;background:var(--primary-color);color:#fff}
body.dark-mode .btn{background:linear-gradient(135deg,rgba(212,175,55,0.2),rgba(212,175,55,0.15));color:#D4AF37;border:1px solid rgba(212,175,55,0.2)}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(59,130,246,0.3)}
body.dark-mode .btn:hover{box-shadow:0 4px 16px rgba(212,175,55,0.2)}
.btn-outline{background:transparent;border:1px solid var(--border-color);color:var(--text-secondary)}
body.dark-mode .btn-outline{border-color:rgba(212,175,55,0.1);color:rgba(255,255,255,0.6)}
.btn-outline:hover{background:rgba(59,130,246,0.06);border-color:var(--primary-color);color:var(--primary-color)}
body.dark-mode .btn-outline:hover{background:rgba(212,175,55,0.08);border-color:rgba(212,175,55,0.2);color:#D4AF37}

/* Footer */
.last-updated{text-align:center;color:var(--text-muted);font-size:11px;margin-top:24px;padding:12px}

@media(max-width:768px){
.status-grid{grid-template-columns:1fr}
.stats-bar{flex-direction:column}
.stat-item{min-width:auto}
}