:root {
    --status-bg: #1a1a1a;
    --status-text: #f0f0f0;
    --status-primary: #00bcd4; /* Cyan */
    --status-secondary: #2a2a2a;
    --status-accent: #4caf50; /* Green for OK */
    --status-border: #444444;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    background-color: var(--status-bg); color: var(--status-text);
    font-family: 'Consolas', 'Courier New', monospace; /* Monospace for status feel */
    line-height: 1.6; overflow-x: hidden;
}

.status-container { max-width: 1000px; margin: 0 auto; padding: 0 20px;}

/* Header */
.status-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 0; margin-bottom: 40px; border-bottom: 1px solid var(--status-border);
}
.status-brand {
    font-size: 24px; font-weight: bold; color: var(--status-primary);
    display: flex; align-items: center; gap: 10px; text-transform: uppercase;
}
.status-brand::before {
    content: '📊'; font-size: 24px;
}
.status-nav { display: flex; gap: 20px; }
.status-nav a {
    font-size: 14px; font-weight: bold; color: #aaa; text-decoration: none;
    text-transform: uppercase; transition: color 0.2s;
}
.status-nav a:hover, .status-nav a.active { color: var(--status-primary); }

/* Hero / Overall Status */
.status-hero {
    text-align: center; margin-bottom: 60px; padding: 40px 20px;
    background: var(--status-secondary); border: 1px solid var(--status-border);
    border-radius: 8px;
}
.overall-status {
    display: inline-flex; align-items: center; gap: 15px; background: rgba(76, 175, 80, 0.1);
    padding: 15px 30px; border-radius: 40px; border: 1px solid var(--status-accent);
    margin-bottom: 20px;
}
.status-dot {
    width: 15px; height: 15px; background: var(--status-accent); border-radius: 50%;
    animation: pulse 2s infinite;
}
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(76, 175, 80, 0); } 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); } }
.overall-status h1 { font-size: 24px; color: var(--status-accent); font-weight: normal; margin: 0;}
.status-hero p { font-size: 16px; color: #888; margin-bottom: 30px;}

.btn-status {
    display: inline-block; padding: 12px 25px; font-size: 14px; font-weight: bold;
    color: #000; background: var(--status-primary); border: none; border-radius: 4px;
    text-decoration: none; text-transform: uppercase; transition: background 0.2s;
}
.btn-status:hover { background: #0097a7; }

/* Node List */
.status-nodes { margin-bottom: 80px; }
.status-nodes h2 { font-size: 20px; margin-bottom: 20px; color: #fff; border-bottom: 1px solid var(--status-border); padding-bottom: 10px;}
.sn-table { width: 100%; border-collapse: collapse; background: var(--status-secondary); border-radius: 8px; overflow: hidden; border: 1px solid var(--status-border);}
.sn-table th, .sn-table td { padding: 15px; text-align: left; border-bottom: 1px solid var(--status-border); font-size: 14px;}
.sn-table th { color: var(--status-primary); font-weight: normal; text-transform: uppercase; background: #222;}
.sn-table tr:last-child td { border-bottom: none; }
.sn-ok { color: var(--status-accent); font-weight: bold;}
.sn-warn { color: #ff9800; font-weight: bold;}
.sn-down { color: #f44336; font-weight: bold;}

/* FAQ */
.status-faq { margin-bottom: 80px; }
.status-faq h2 { font-size: 20px; margin-bottom: 20px; color: #fff; border-bottom: 1px solid var(--status-border); padding-bottom: 10px;}
.s-faq-item {
    background: var(--status-secondary); padding: 20px; margin-bottom: 15px;
    border: 1px solid var(--status-border); border-radius: 8px;
}
.s-fq { font-size: 16px; font-weight: bold; color: var(--status-primary); margin-bottom: 10px;}
.s-fa { font-size: 14px; color: #aaa;}

footer {
    text-align: center; padding: 20px 0; color: #777; font-size: 12px;
    border-top: 1px solid var(--status-border); text-transform: uppercase;
}

@media (max-width: 768px) {
    .status-header { flex-direction: column; gap: 15px; }
    .sn-table { display: block; overflow-x: auto; white-space: nowrap; }
}