.environment-badge{display:inline-flex;align-items:center;gap:.45rem;max-width:100%;padding:.4rem .7rem;border:1px solid #cbd5e1;border-radius:999px;background:#f1f5f9;color:#334155;font-size:.7rem;font-weight:800;letter-spacing:.055em;line-height:1.35;white-space:normal;vertical-align:middle}
.environment-badge::before{content:'';flex:0 0 .5rem;height:.5rem;border-radius:50%;background:currentColor}
.environment-badge[data-environment=PROD]{color:#166534;background:#f0fdf4;border-color:#86efac}
.environment-badge[data-environment=DEV]{color:#92400e;background:#fffbeb;border-color:#fcd34d}
.environment-badge[data-environment=UNSET]{color:#991b1b;background:#fef2f2;border-color:#fca5a5}
.header-tools .environment-badge{flex-shrink:0}
@media(max-width:600px){.header-tools .environment-badge{order:-1}.header-tools{flex-wrap:wrap}}
/* Existing compact layouts hide header spans/topline; identity stays visible. */
.header-tools span.environment-badge{display:inline-flex}
@media(max-width:720px){.access-page .access-topline{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}}
@media(max-width:650px){.shell>header{flex-wrap:wrap}.shell>header .header-tools{width:100%;flex-wrap:wrap;justify-content:flex-start}.shell>header .header-tools .environment-badge{order:-1}}