:root {
    --color-primary: #101b67;
    --color-primary-hover: #243d8f;
    --color-soft-blue: #aec6e8;
    --color-page: #f4f6f9;
    --color-surface: #ffffff;
    --color-text: #202b3d;
    --color-muted: #667085;
    --color-border: #d8e0ea;
    --color-focus: rgba(36, 61, 143, 0.15);
    --color-action-sessions: #6941c6;
    --color-action-sessions-tint: #f4f3ff;
    --color-action-warning: #b54708;
    --color-action-warning-tint: #fffaeb;
    --color-action-unlock: #0f766e;
    --color-action-unlock-tint: #f0fdfa;
    --color-action-danger: #d92d20;
    --color-action-danger-tint: #fef3f2;
    --color-maintenance-background: #912018;
    --color-maintenance-border: #912018;
    --color-maintenance-foreground: #ffffff;
    --shadow-card: 0 18px 50px rgba(16, 27, 103, 0.1);
}

* {
    box-sizing: border-box;
}

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

body {
    margin: 0;
}

.environment-banner {
    position: sticky;
    top: 0;
    z-index: 90;
    width: 100%;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px clamp(20px, 5vw, 72px);
    border-bottom: 1px solid;
    font-size: 0.75rem;
    line-height: 1.3;
}

.environment-banner svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.environment-banner:is(.is-development, .is-test, .is-staging, .is-production) { border-color: var(--color-primary-hover); color: var(--color-primary); background: var(--color-soft-blue); }

.operational-banner-stack {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
}

.operational-banner-stack > :is(.admin-maintenance-banner, .public-maintenance-banner, .environment-banner) {
    position: relative;
    top: auto;
}

:is(.admin-maintenance-banner, .public-maintenance-banner) {
    overflow: hidden;
}

:is(.admin-maintenance-banner, .public-maintenance-banner)::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 25%;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    content: "";
    transform: translateX(0);
    animation: maintenance-activity 3.5s linear infinite alternate;
    pointer-events: none;
}

@keyframes maintenance-activity {
    to { transform: translateX(300%); }
}

button,
input,
select {
    font: inherit;
}

@media (prefers-reduced-motion: reduce) {
    * {
        scroll-behavior: auto !important;
        transition: none !important;
    }

    :is(.admin-maintenance-banner, .public-maintenance-banner)::after {
        left: 0;
        width: 100%;
        opacity: 0.2;
        transform: none;
        animation: none;
    }
}