:root {
    --bg: #0f1218;
    --card: #181d27;
    --border: #262d3b;
    --text: #e6e9ef;
    --muted: #8b94a7;
    --accent: #4da3ff;
    --live: #3ddc84;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px 16px 40px;
}

h1 {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 0 20px;
}

.status {
    background: linear-gradient(135deg, #1b2230, #151a24);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 20px;
}

.status.live {
    border-left-color: var(--live);
    animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.35); }
    50%      { box-shadow: 0 0 0 8px rgba(61, 220, 132, 0); }
}

.status-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.status-user {
    font-size: 2rem;
    font-weight: 700;
    margin: 4px 0;
    word-break: break-word;
}

.status-info { color: var(--muted); }
.status.live .status-info { color: var(--live); }

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 12px 16px;
    text-align: left;
}

th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    background: #141922;
    border-bottom: 1px solid var(--border);
}

td { border-bottom: 1px solid var(--border); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #1d2330; }

.num { text-align: right; font-variant-numeric: tabular-nums; }
.empty { text-align: center; color: var(--muted); padding: 28px; }
tr.running td { color: var(--live); }

.footer {
    margin-top: 14px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--muted);
}

@media (max-width: 480px) {
    th, td { padding: 10px 10px; font-size: 0.9rem; }
    .status-user { font-size: 1.6rem; }
}