:root {
    --bg: #f6f7f9;
    --fg: #1d2330;
    --muted: #5b6475;
    --card: #ffffff;
    --border: #d9dde5;
    --accent: #0b5cad;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #14171d;
        --fg: #e6e9ef;
        --muted: #9aa3b5;
        --card: #1e232c;
        --border: #333a47;
        --accent: #5aa2f0;
    }
}

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

header {
    padding: 12px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--card);
}

.brand {
    font-weight: 600;
    color: var(--fg);
    text-decoration: none;
}

main {
    max-width: 880px;
    margin: 0 auto;
    padding: 32px 16px;
}

p {
    color: var(--muted);
}

.environments {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.environment {
    display: block;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card);
    color: var(--fg);
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    border-top: 4px solid var(--accent);
}

.environment:hover {
    border-color: var(--accent);
}

.environment-production {
    border-top-color: #c62828;
}

button {
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card);
    color: var(--fg);
    cursor: pointer;
}

details {
    margin-top: 24px;
}

table {
    border-collapse: collapse;
    margin-top: 8px;
    font-size: 0.9rem;
}

td {
    padding: 4px 12px 4px 0;
    vertical-align: top;
    word-break: break-all;
}