:root {
    color-scheme: dark;

    --background: #0c0f14;
    --surface: #151a22;
    --surface-hover: #1c2330;
    --border: #283140;
    --text: #e8edf5;
    --muted: #8995a7;

    --green: #42d392;
    --red: #ff626e;
    --orange: #f0ad4e;
    --yellow: #e6d66a;
    --accent: #6c91ff;
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    padding: 48px 20px 24px;

    background:
    radial-gradient(ellipse at top, #182133 0%, transparent 55%),
    var(--background);

    color: var(--text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
}

.page-header {
    width: min(760px, 100%);
    margin: 0 auto 32px;
}

.page-header h1 {
    margin: 0;
    font-size: clamp(28px, 5vw, 38px);
    font-weight: 750;
    letter-spacing: -1px;
}

.page-header p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 14px;
}

main {
    width: min(760px, 100%);
    margin: 0 auto;
}

.servers-list {
    display: grid;
    gap: 12px;
}

.server-card {
    display: flex;
    align-items: center;
    gap: 18px;

    min-width: 0;
    padding: 18px;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;

    transition:
    background 160ms ease,
    border-color 160ms ease;
}

.server-card:hover {
    background: var(--surface-hover);
    border-color: #3b4960;
}

.server-icon {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    object-fit: contain;
}

.server-info {
    flex: 1;
    min-width: 0;
}

.server-name {