:root { /* === Admin-specific tokens === */ /* Admin-specific layout */ --sidebar-width: 260px; --header-height: 56px; /* === Status-badge category palette === */ /* Monitoring service/instance/deployment status */ --badge-bg-mon-status-healthy: rgba(34, 197, 94, 0.15); --badge-fg-mon-status-healthy: #4ade80; --badge-bg-mon-status-degraded: rgba(245, 158, 11, 0.15); --badge-fg-mon-status-degraded: #fbbf24; --badge-bg-mon-status-down: rgba(239, 68, 68, 0.15); --badge-fg-mon-status-down: #f87171; --badge-bg-mon-status-unknown: rgba(148, 163, 184, 0.15); --badge-fg-mon-status-unknown: #94a3b8; --badge-bg-mon-status-starting: rgba(59, 130, 246, 0.15); --badge-fg-mon-status-starting: #60a5fa; --badge-bg-mon-status-paused: rgba(156, 163, 175, 0.15); --badge-fg-mon-status-paused: #9ca3af; --badge-bg-mon-status-sleeping: rgba(34, 211, 238, 0.15); --badge-fg-mon-status-sleeping: #22d3ee; /* Monitoring queue chip (neutral surface tint) */ --badge-bg-mon-queue: var(--secondary-surface); --badge-fg-mon-queue: var(--text-secondary); /* Catalog item chips (Enterprise / Agency / Developer) */ --badge-bg-catalog-item-enterprise: rgba(245, 158, 11, 0.15); --badge-fg-catalog-item-enterprise: #fbbf24; --badge-bg-catalog-item-agency: rgba(168, 85, 247, 0.15); --badge-fg-catalog-item-agency: #c084fc; --badge-bg-catalog-item-developer: rgba(59, 130, 246, 0.15); --badge-fg-catalog-item-developer: #60a5fa; } /* Universal reset lives in static.minxi.ai/css/reset.css — it enumerates HTML elements explicitly rather than using `*` so the catalogue components' :host rules win the cascade (Context tiebreaker, Cascade Level 5 § 7). Don't redeclare a universal `* { margin: 0; padding: 0 }` here. */ body { font-family: var(--font-family); background: linear-gradient(180deg, var(--background-start), var(--background-end)); background-attachment: fixed; color: var(--text-primary); margin: 0; min-height: 100vh; display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Pre-paint auth-state drive: when `` is set (by the synchronous head script that reads the JWT from localStorage), the body widens to sidebar + main from frame 1. No JS-driven reveal, no :has() re-evaluation race, no layout shift on load. When `data-authed` is absent, body stays single-column and the sidebar is `display: none` -- the login dialog occupies the viewport via .showModal(). */ html[data-authed] body { grid-template-columns: var(--sidebar-width) minmax(0, 1fr); } body > aside { grid-row: 1; grid-column: 1; background: var(--side-nav-bg, transparent); border-right: 1px solid var(--border-soft); display: none; /* default: pre-auth, sidebar hidden */ flex-direction: column; overflow-y: auto; padding: var(--space-md) 0; } html[data-authed] body > aside { display: flex; } body > aside > header { padding: 0 var(--space-md) var(--space-md); border-bottom: 1px solid var(--border-soft); margin-bottom: var(--space-md); } body > aside > header > strong { display: block; font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--text-primary); } body > aside > header > p { margin: var(--space-xs) 0 0; font-size: var(--font-size-xs); letter-spacing: var(--letter-spacing-caps); text-transform: uppercase; color: var(--text-tertiary); } body > aside > nav { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; } /* Sidebar section groups — native
. CSS-customised to hide the default disclosure triangle in favour of a tinted hover surface + chevron rotation on [open]. Items inside each
are direct siblings — no