/* --- Environment Banner (isolated styles) --- */
:root {
    --env-banner-height: 40px; /* min-height 32px + padding/border -> ~40px */
}

.env-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 10px;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #111;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    background: #fff; /* base, overridden by env themes */
}

    /* Dot */
    .env-banner .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 8px;
    }

    /* Environment color themes */
    .env-banner.dev {
        background: #eef2ff;
    }

        .env-banner.dev .dot {
            background: #6366f1;
        }

    .env-banner.test {
        background: #fffbe6;
    }

        .env-banner.test .dot {
            background: #f59e0b;
        }

/* Push page down when banner exists */
.env-offset {
    /* Use the same value everywhere to avoid guessing */
    padding-top: var(--env-banner-height);
}