body {
    font-family: "MiSans", system-ui, -apple-system, sans-serif;
    color: #333;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: url('https://api.lxixi.top') center center / cover no-repeat fixed;
    position: relative;
}
body::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: inherit;
    filter: blur(12px) brightness(1.1);
    transform: scale(1.05);
    z-index: -1;
}

.container {max-width:1100px;margin:0 auto;padding:20px;position:relative;z-index:1}
header {text-align:center;padding:60px 0 40px;background:rgba(255,255,255,0.75);backdrop-filter:blur(12px);border-radius:20px;margin:20px;box-shadow:0 8px 32px rgba(0,0,0,.1)}
header h1 {font-size:2.8em;margin:0;color:#222;font-weight:300}
header p {color:#555;font-size:1.1em;margin:15px 0 0}
.components {display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin:40px 0}
.card {
    background:rgba(255,255,255,0.82);
    backdrop-filter:blur(20px);
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 8px 32px rgba(0,0,0,.12);
    border:1px solid rgba(255,255,255,.3);
    transition:.4s;
}
.card:hover {transform:translateY(-8px);box-shadow:0 20px 50px rgba(0,0,0,.2)}
.status-bar {height:6px;background:rgba(0,0,0,.1)}
.status-bar::before {content:"";position:absolute;top:0;left:0;height:100%;width:100%;background:#52c41a}
.major-outage .status-bar::before {background:#f5222d}
.icon {font-size:3.8em;text-align:center;padding:28px 0 8px;opacity:0.9}
.card h3 {text-align:center;margin:0 0 12px;font-size:1.35em;color:#222}
.status {text-align:center;font-size:1.5em;font-weight:600;margin:8px 0}
.operational .status {color:#52c41a}
.major-outage .status {color:#f5222d}
.uptime {text-align:center;color:#666;font-size:1em;margin-bottom:20px}
footer {text-align:center;padding:60px 0 40px;color:rgba(255,255,255,.8);text-shadow:0 1px 3px rgba(0,0,0,.3);font-size:0.9em}