:root {
    color-scheme: light;
    --color-primary: #245b78;
    --color-primary-dark: #173f55;
    --color-accent: #d8a43b;
    --color-background: #eef4f6;
    --color-surface: #ffffff;
    --color-text: #20313a;
    --color-muted: #627680;
    --color-border: #d7e2e7;
    --color-notice: #f7f1df;
    --shadow: 0 20px 50px rgba(23, 63, 85, 0.12);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--color-text);
    background:
        radial-gradient(circle at top left, rgba(36, 91, 120, 0.11), transparent 38rem),
        var(--color-background);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
}

.page {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 2rem 1rem;
}

.status-card {
    width: min(100%, 44rem);
    padding: clamp(1.5rem, 5vw, 3rem);
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid rgba(215, 226, 231, 0.9);
    border-radius: 1.25rem;
    box-shadow: var(--shadow);
}

.environment-badge {
    display: inline-block;
    padding: 0.45rem 0.75rem;
    color: var(--color-primary-dark);
    background: #e1eef3;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.status-card__header {
    margin: 1.5rem 0 2rem;
}

.eyebrow {
    margin: 0 0 0.35rem;
    color: var(--color-accent);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

h1 {
    margin: 0;
    color: var(--color-primary-dark);
    font-size: clamp(2rem, 8vw, 3.25rem);
    line-height: 1.08;
}

.subtitle {
    margin: 0.85rem 0 0;
    color: var(--color-muted);
    font-size: 1.05rem;
}

.environment-info {
    display: grid;
    gap: 0;
    margin: 0;
    border-top: 1px solid var(--color-border);
}

.environment-info div {
    display: grid;
    grid-template-columns: minmax(10rem, 0.9fr) 1.1fr;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border);
}

.environment-info dt {
    color: var(--color-muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.environment-info dd {
    margin: 0;
    overflow-wrap: anywhere;
    font-weight: 700;
}

.notice {
    margin: 2rem 0 0;
    padding: 1rem 1.1rem;
    color: #66521f;
    background: var(--color-notice);
    border-left: 4px solid var(--color-accent);
    border-radius: 0.35rem;
}

@media (max-width: 36rem) {
    .page {
        align-items: start;
        padding: 1rem;
    }

    .status-card {
        border-radius: 1rem;
    }

    .environment-info div {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
}