:root { color-scheme: dark; --background: #071014; --panel: rgba(12, 28, 35, 0.96); --panel-edge: #2d7f8f; --text: #e6f6f8; --muted: #8eb3ba; --accent: #61d7e8; --accent-strong: #9af4ff; --danger: #ff8d8d; --success: #8ff0c1; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: linear-gradient(rgba(4, 13, 17, 0.92), rgba(4, 13, 17, 0.96)), repeating-linear-gradient(90deg, transparent 0, transparent 79px, rgba(97, 215, 232, 0.05) 80px); color: var(--text); display: flex; flex-direction: column; }
a { color: var(--accent); }
.page-shell { width: 100%; max-width: 1120px; margin: auto; padding: 40px 20px 24px; }
.panel { max-width: 520px; margin: 0 auto; padding: 28px; background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 8px; box-shadow: 0 0 0 1px rgba(97, 215, 232, 0.08), 0 0 28px rgba(30, 140, 160, 0.12); }
.panel.wide { max-width: 1040px; }
.panel-header { margin-bottom: 24px; }
.panel-header h1 { margin: 6px 0 12px; font-size: 1.8rem; letter-spacing: 0.04em; }
.panel-header p { margin: 0; color: var(--muted); line-height: 1.55; }
.eyebrow { color: var(--accent); font-size: 0.75rem; letter-spacing: 0.2em; }
.notice { margin-bottom: 20px; padding: 12px 14px; border-left: 3px solid; background: rgba(255, 255, 255, 0.04); }
.notice.error { color: var(--danger); border-color: var(--danger); }
.empty-state { padding: 34px 20px; color: var(--muted); background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(97, 215, 232, 0.14); border-radius: 6px; text-align: center; }
.status-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.summary-card { padding: 16px; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(97, 215, 232, 0.14); border-radius: 6px; }
.summary-card strong { display: block; margin-top: 5px; color: var(--text); font-size: 1.45rem; }
.summary-label { color: var(--muted); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.table-wrap { overflow-x: auto; border: 1px solid rgba(97, 215, 232, 0.18); border-radius: 6px; }
.status-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.status-table th, .status-table td { padding: 14px 16px; border-bottom: 1px solid rgba(97, 215, 232, 0.12); text-align: left; vertical-align: middle; }
.status-table th { color: var(--accent); background: rgba(97, 215, 232, 0.055); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; }
.status-table tbody tr:last-child td { border-bottom: 0; }
.status-table tbody tr:hover { background: rgba(97, 215, 232, 0.035); }
.server-name { font-weight: 700; }
.status-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; }
.status-pill.up { color: var(--success); }
.status-pill.down { color: var(--danger); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.status-detail { margin-top: 4px; color: var(--muted); font-size: 0.74rem; }
.process-state { font-weight: 700; }
.process-state.running { color: var(--success); }
.process-state.missing { color: var(--danger); }
.instance-note { margin-top: 14px; color: var(--muted); font-size: 0.78rem; text-align: right; }
.site-footer { padding: 22px 16px 28px; color: var(--muted); text-align: center; font-size: 0.82rem; line-height: 1.6; }
.site-footer a { color: var(--accent); }
@media (max-width: 720px) { .status-summary { grid-template-columns: 1fr; } .panel { padding: 20px; } .page-shell { padding: 24px 12px 16px; } }