@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Inter Tight";
    src: url("../fonts/InterTight-Variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("../fonts/JetBrainsMono-Variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

.app-shell {
    --layout-shell-max: 100rem;
    --layout-drawer-min: 15rem;
    --layout-drawer-max: 16.75rem;
    --layout-panel-narrow-max: 42rem;
    --layout-side-sheet-max: 30rem;
    --layout-modal-max: 44rem;
    --layout-status-banner-max: 34rem;
    --layout-command-palette-max: 72rem;
    --layout-readout-max: 22rem;
    --space-2: 0.38rem;
    --space-3: 0.58rem;
    --space-4: 0.78rem;
    --space-5: 0.98rem;
    --space-6: 1.14rem;
    --space-8: 1.5rem;
    --space-10: 1.9rem;
    --space-12: 2.35rem;
    --app-surface-border: var(--border-strong);
    --app-surface-solid: var(--surface-foundation);
    --app-surface-solid-strong: var(--surface-foundation);
    --app-surface-soft: var(--surface-foundation-muted);
    --app-surface-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.95));
    --app-surface-muted: rgba(255, 255, 255, 0.72);
    --app-surface-muted-strong: rgba(255, 255, 255, 0.96);
    --app-surface-selected: var(--surface-foundation-selected);
    --app-surface-panel-border: rgba(16, 33, 54, 0.18);
    --app-surface-panel-gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0));
    --app-surface-panel-bg: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(236, 243, 251, 0.96));
    --app-surface-workbench-border: rgba(16, 33, 54, 0.14);
    --app-surface-workbench-bg: linear-gradient(180deg, rgba(227, 236, 246, 0.98), rgba(239, 245, 252, 0.96));
    --app-surface-workbench-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.76),
        0 10px 24px rgba(15, 23, 40, 0.06);
    --app-surface-inset-border: rgba(16, 33, 54, 0.12);
    --app-surface-inset-bg: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(244, 248, 253, 0.97));
    --app-surface-inset-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.84),
        0 12px 24px rgba(15, 23, 40, 0.055);
    --app-surface-callout-border: rgba(8, 86, 163, 0.24);
    --app-surface-callout-bg: linear-gradient(180deg, rgba(224, 238, 255, 0.98), rgba(244, 249, 255, 0.99));
    --app-text-strong: #102a43;
    --app-text-body: #243b53;
    --app-text-muted: #3f5873;
    --app-text-support: #48617a;
    --app-brand-border: var(--state-info-border);
    --app-focus-ring: rgba(21, 94, 239, 0.62);
    --app-focus-shadow: rgba(147, 197, 253, 0.36);
    --app-hit-target: 2.4rem;
    --button-primary-bg: linear-gradient(135deg, #155eef, #0ba49c);
    --button-primary-border: transparent;
    --button-primary-fg: #ffffff;
    --button-secondary-bg: rgba(21, 94, 239, 0.16);
    --button-secondary-border: rgba(21, 94, 239, 0.3);
    --button-secondary-fg: #0b4ea2;
    --button-tertiary-bg: rgba(16, 33, 54, 0.08);
    --button-tertiary-border: rgba(16, 33, 54, 0.16);
    --button-tertiary-fg: #344054;
    --elevation-card: 0 18px 42px rgba(15, 23, 40, 0.08);
    --elevation-raised: 0 20px 42px rgba(15, 23, 40, 0.1);
    --elevation-overlay: 0 24px 56px rgba(15, 23, 40, 0.14);
    --elevation-live: 0 16px 34px rgba(8, 86, 163, 0.08);
    --type-page-title: clamp(1.56rem, 2.25vw, 2.06rem);
    --type-hero-title: clamp(1.42rem, 2.1vw, 1.86rem);
    --type-section-title: 1.14rem;
    --type-card-title: 0.94rem;
    --type-body: 0.91rem;
    --type-body-compact: 0.8rem;
    --type-label: 0.71rem;
    --type-kicker: 0.67rem;
    --tracking-display: -0.01em;
    --tracking-kicker: 0.08em;
    --tracking-label: 0.06em;
    max-width: var(--layout-shell-max);
    margin: 0 auto;
    padding: var(--space-6) var(--space-5) var(--space-10);
    display: grid;
    grid-template-columns: minmax(var(--layout-drawer-min), var(--layout-drawer-max)) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
    color: var(--app-text-body);
    font-optical-sizing: auto;
    text-rendering: optimizeLegibility;
}

.app-skip-links {
    position: absolute;
    inset-inline-start: 1rem;
    top: 0.75rem;
    z-index: 160;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.skip-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.18);
    background: rgba(248, 250, 252, 0.97);
    color: #12314e;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 16px 32px rgba(15, 23, 40, 0.18);
    transform: translateY(-170%);
    transition:
        transform var(--motion-duration-fast) var(--motion-ease-standard),
        background-color var(--motion-duration-fast) var(--motion-ease-standard),
        border-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.app-skip-links:focus-within .skip-link,
.skip-link:focus-visible {
    transform: translateY(0);
}

.skip-link-button {
    cursor: pointer;
    font: inherit;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

html,
body,
#app {
    min-height: 100%;
}

body {
    margin: 0;
    background: linear-gradient(180deg, #f6f9fd 0%, #eef4fb 100%);
    color: #12314e;
    transition:
        background-color var(--motion-duration-normal) var(--motion-ease-standard),
        background-image var(--motion-duration-normal) var(--motion-ease-standard),
        color var(--motion-duration-normal) var(--motion-ease-standard);
}

body:has(.app-shell[data-ui-theme="dark"]) {
    background:
        radial-gradient(circle at top, rgba(30, 64, 175, 0.16), transparent 42%),
        linear-gradient(180deg, #07111f 0%, #0b1322 52%, #0f172a 100%);
    color: #e5eef9;
}

body:has(.app-shell[data-ui-theme="dark"]) .command-palette-panel {
    border-color: rgba(96, 165, 250, 0.22);
    background: #122033;
    color: #c7d3e3;
}

body:has(.app-shell[data-ui-theme="dark"]) .action-center-panel {
    border-left-color: rgba(96, 165, 250, 0.22);
    background: linear-gradient(180deg, rgba(12, 20, 36, 0.99), rgba(8, 15, 28, 0.98));
    color: #c7d3e3;
}

body:has(.app-shell[data-ui-theme="dark"]) .action-center-panel h2,
body:has(.app-shell[data-ui-theme="dark"]) .action-center-panel strong,
body:has(.app-shell[data-ui-theme="dark"]) .action-center-panel .eyebrow {
    color: #e5eef9;
}

body:has(.app-shell[data-ui-theme="dark"]) .action-center-panel .muted,
body:has(.app-shell[data-ui-theme="dark"]) .action-center-panel .compact-copy,
body:has(.app-shell[data-ui-theme="dark"]) .action-center-panel .action-center-resource,
body:has(.app-shell[data-ui-theme="dark"]) .action-center-panel p {
    color: #aebed2;
}

body:has(.app-shell[data-ui-theme="dark"]) .action-center-panel .panel-card,
body:has(.app-shell[data-ui-theme="dark"]) .action-center-entry {
    border-color: rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(19, 33, 53, 0.98), rgba(15, 23, 42, 0.96));
    box-shadow: var(--elevation-card);
}

body:has(.app-shell[data-ui-theme="dark"]) .action-center-entry-header strong {
    color: #e5eef9;
}

body:has(.app-shell[data-ui-theme="dark"]) .action-center-entry-outcome-grid div {
    border-color: rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.68);
}

body:has(.app-shell[data-ui-theme="dark"]) .action-center-entry-outcome-grid dd,
body:has(.app-shell[data-ui-theme="dark"]) .action-center-target-result-header strong {
    color: #e5eef9;
}

body:has(.app-shell[data-ui-theme="dark"]) .action-center-panel .action-button.tertiary {
    --button-fg: #e5eef9;
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.24);
}

body:has(.app-shell[data-ui-theme="dark"]) .skip-link {
    border-color: rgba(148, 163, 184, 0.24);
    background: rgba(15, 23, 42, 0.96);
    color: #e5eef9;
    box-shadow: 0 18px 34px rgba(2, 6, 23, 0.44);
}

body:has(.app-shell[data-ui-theme="dark"]) .command-palette-copy,
body:has(.app-shell[data-ui-theme="dark"]) .command-palette-section-copy,
body:has(.app-shell[data-ui-theme="dark"]) .command-palette-intent-summary {
    color: #aebed2;
}

body:has(.app-shell[data-ui-theme="dark"]) .command-palette-panel .muted,
body:has(.app-shell[data-ui-theme="dark"]) .command-palette-panel .compact-copy,
body:has(.app-shell[data-ui-theme="dark"]) .command-palette-panel .guidance-copy,
body:has(.app-shell[data-ui-theme="dark"]) .command-palette-panel .guidance-extended {
    color: #aebed2;
}

body:has(.app-shell[data-ui-theme="dark"]) .command-palette-panel code {
    background: rgba(148, 163, 184, 0.14);
    color: #e5eef9;
}

body:has(.app-shell[data-ui-theme="dark"]) .command-palette-section-title,
body:has(.app-shell[data-ui-theme="dark"]) .command-palette-title {
    color: #e5eef9;
}

body:has(.app-shell[data-ui-theme="dark"]) .command-palette-input {
    border-color: rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 42, 0.92);
    color: #e5eef9;
}

body:has(.app-shell[data-ui-theme="dark"]) .command-palette-suggestion {
    border-color: rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(19, 33, 53, 0.98), rgba(15, 23, 42, 0.96));
    color: #c7d3e3;
}

body:has(.app-shell[data-ui-theme="dark"]) .command-palette-suggestion:hover,
body:has(.app-shell[data-ui-theme="dark"]) .command-palette-suggestion.active {
    border-color: rgba(96, 165, 250, 0.28);
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.24), rgba(13, 148, 136, 0.16));
}

body:has(.app-shell[data-ui-theme="dark"]) .command-palette-badge {
    background: rgba(30, 64, 175, 0.2);
    color: #bfdbfe;
}

body:has(.app-shell[data-ui-theme="dark"]) .command-palette-intent {
    border-color: rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(19, 33, 53, 0.98), rgba(15, 23, 42, 0.96));
}

body:has(.app-shell[data-ui-theme="dark"]) .command-palette-intent-chip {
    background: rgba(148, 163, 184, 0.12);
    color: #dce7f4;
    border-color: rgba(148, 163, 184, 0.22);
}

body:has(.app-shell[data-ui-theme="dark"]) .command-palette-panel .action-button.tertiary {
    --button-fg: #e5eef9;
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.24);
}

body:has(.app-shell[data-ui-theme="dark"]) .empty-state-card {
    border-color: rgba(148, 163, 184, 0.22);
    background: linear-gradient(180deg, rgba(20, 33, 54, 0.98), rgba(15, 23, 42, 0.96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    color: var(--app-text-body);
}

body:has(.app-shell[data-ui-theme="dark"]) .empty-state-card::before {
    color: var(--app-text-muted);
}

body:has(.app-shell[data-ui-theme="dark"]) .empty-state-copy,
body:has(.app-shell[data-ui-theme="dark"]) .empty-state-card .message-list,
body:has(.app-shell[data-ui-theme="dark"]) .empty-state-card strong,
body:has(.app-shell[data-ui-theme="dark"]) .empty-state-card p,
body:has(.app-shell[data-ui-theme="dark"]) .empty-state-card span {
    color: inherit;
}

#app {
    min-height: 100vh;
}

.app-shell-wallboard {
    max-width: 100%;
    padding: var(--space-5);
    grid-template-columns: minmax(0, 1fr);
}

.app-shell[data-ui-density="compact"] {
    --space-2: 0.32rem;
    --space-3: 0.5rem;
    --space-4: 0.68rem;
    --space-5: 0.86rem;
    --space-6: 1rem;
    --space-8: 1.32rem;
    --space-10: 1.66rem;
    --space-12: 2.04rem;
    --type-page-title: clamp(1.44rem, 2.12vw, 1.92rem);
    --type-hero-title: clamp(1.3rem, 1.96vw, 1.7rem);
    --type-section-title: 1.04rem;
    --type-card-title: 0.9rem;
    --type-body: 0.88rem;
    --type-body-compact: 0.77rem;
    --type-label: 0.67rem;
    --type-kicker: 0.64rem;
    --app-hit-target: 2.25rem;
}

.app-shell[data-ui-density="incident"] {
    --space-2: 0.28rem;
    --space-3: 0.42rem;
    --space-4: 0.6rem;
    --space-5: 0.76rem;
    --space-6: 0.92rem;
    --space-8: 1.18rem;
    --space-10: 1.48rem;
    --space-12: 1.82rem;
    --type-page-title: clamp(1.34rem, 2vw, 1.76rem);
    --type-hero-title: clamp(1.22rem, 1.85vw, 1.56rem);
    --type-section-title: 0.98rem;
    --type-card-title: 0.86rem;
    --type-body: 0.84rem;
    --type-body-compact: 0.74rem;
    --type-label: 0.64rem;
    --type-kicker: 0.61rem;
    --app-hit-target: 2.1rem;
}

.app-shell[data-ui-theme="dark"] {
    --app-surface-border: var(--border-strong);
    --app-surface-solid: var(--surface-foundation);
    --app-surface-solid-strong: #122033;
    --app-surface-soft: var(--surface-foundation-muted);
    --app-surface-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(11, 18, 32, 0.96));
    --app-surface-muted: rgba(24, 39, 63, 0.98);
    --app-surface-muted-strong: rgba(31, 50, 80, 0.99);
    --app-surface-selected: linear-gradient(135deg, rgba(37, 99, 235, 0.34), rgba(13, 148, 136, 0.24));
    --app-surface-panel-border: rgba(148, 163, 184, 0.24);
    --app-surface-panel-gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
    --app-surface-panel-bg: linear-gradient(180deg, rgba(7, 13, 24, 0.995), rgba(3, 8, 17, 0.99));
    --app-surface-workbench-border: rgba(148, 163, 184, 0.26);
    --app-surface-workbench-bg: linear-gradient(180deg, rgba(28, 47, 77, 0.99), rgba(19, 35, 59, 0.985));
    --app-surface-workbench-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 14px 28px rgba(2, 6, 23, 0.24);
    --app-surface-inset-border: rgba(148, 163, 184, 0.3);
    --app-surface-inset-bg: linear-gradient(180deg, rgba(39, 63, 101, 0.995), rgba(27, 47, 78, 0.985));
    --app-surface-inset-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 16px 30px rgba(2, 6, 23, 0.28);
    --app-surface-callout-border: rgba(96, 165, 250, 0.28);
    --app-surface-callout-bg: linear-gradient(180deg, rgba(18, 33, 56, 0.94), rgba(10, 21, 38, 0.91));
    --app-text-strong: #e5eef9;
    --app-text-body: #c7d3e3;
    --app-text-muted: #aebed2;
    --app-text-support: #aebed2;
    --app-brand-border: var(--state-info-border);
    --app-focus-ring: rgba(147, 197, 253, 0.88);
    --app-focus-shadow: rgba(37, 99, 235, 0.36);
    --button-primary-bg: linear-gradient(135deg, #2563eb, #0d9488);
    --button-primary-border: transparent;
    --button-primary-fg: #f8fbff;
    --button-secondary-bg: rgba(37, 99, 235, 0.22);
    --button-secondary-border: rgba(96, 165, 250, 0.28);
    --button-secondary-fg: #dbeafe;
    --button-tertiary-bg: rgba(148, 163, 184, 0.12);
    --button-tertiary-border: rgba(148, 163, 184, 0.24);
    --button-tertiary-fg: #e5eef9;
    --elevation-card: 0 18px 42px rgba(2, 8, 23, 0.34);
    --elevation-raised: 0 20px 44px rgba(2, 8, 23, 0.42);
    --elevation-overlay: 0 26px 60px rgba(2, 8, 23, 0.54);
    --elevation-live: 0 18px 36px rgba(2, 8, 23, 0.4);
    color-scheme: dark;
}

.app-shell :is(button, a, input, select, textarea, summary):focus-visible,
.app-shell .context-card:focus-visible,
.app-shell .command-palette-suggestion:focus-visible,
.app-shell .group-search-chip:focus-visible,
.app-shell .file-picker-button:focus-within,
.app-shell .kind-chip-toggle:focus-within span {
    outline: 2px solid var(--app-focus-ring);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--app-focus-shadow);
}

.app-drawer-link,
.action-button,
.command-launch-button,
.mode-toggle-button,
.command-palette-suggestion,
.group-search-chip,
.kind-chip-toggle span,
.context-card,
.app-wallboard-exit,
.file-picker-button,
.compact-button,
.live-refresh-toggle,
.sort-button,
.related-card-button {
    min-height: var(--app-hit-target);
}

.app-header,
.app-drawer-card,
.hero-panel,
.panel-card {
    border: 1px solid var(--border-strong);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0)),
        var(--app-surface-bg);
    backdrop-filter: blur(18px);
    box-shadow: var(--elevation-raised);
}

.app-content {
    display: grid;
    min-width: 0;
    gap: var(--space-5);
}

.app-content-wallboard {
    gap: var(--space-4);
}

.app-drawer {
    position: sticky;
    top: var(--space-6);
    align-self: start;
    min-width: 0;
}

.app-drawer-card {
    display: grid;
    gap: var(--space-5);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    min-width: 0;
    max-height: calc(100vh - (var(--space-6) * 2));
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.app-drawer-header {
    display: grid;
    gap: 0.2rem;
}

.brand-wordmark {
    display: grid;
    gap: 0.22rem;
    min-width: 0;
}

.brand-wordmark-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--app-text-body);
}

.brand-wordmark-kicker::before {
    content: "";
    width: 0.9rem;
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(135deg, #155eef, #0ba49c);
}

.brand-wordmark-lockup {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.55rem;
}

.brand-wordmark-product {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.45rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
    text-wrap: balance;
    background: linear-gradient(135deg, #155eef, #0ba49c 82%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.brand-wordmark-support {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--app-text-body);
}

.brand-wordmark-compact .brand-wordmark-product {
    font-size: clamp(0.95rem, 0.88rem + 0.35vw, 1.2rem);
}

.connection-readiness-wordmark {
    margin-bottom: var(--space-4);
}

.startup-hero-wordmark {
    margin-bottom: var(--space-3);
}

.app-drawer-guide-header strong,
.app-drawer-section-header strong {
    color: var(--app-text-strong);
}

.app-drawer-header .compact-copy {
    margin: 0;
}

.app-drawer-theme-panel {
    display: grid;
    gap: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--app-surface-border);
}

.app-drawer-theme-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.app-drawer-theme-toggle {
    width: 100%;
    justify-content: stretch;
}

.app-drawer-theme-toggle .mode-toggle-button {
    flex: 1 1 0;
}

.app-drawer-guide-panel,
.app-drawer-nav-section {
    display: grid;
    gap: var(--space-2);
}

.app-drawer-guide-panel {
    padding: var(--space-3);
    border: 1px solid var(--app-surface-border);
    border-radius: var(--radius-md);
    background: var(--app-surface-muted);
    box-shadow: var(--app-surface-workbench-shadow);
}

.app-drawer-guide-header,
.app-drawer-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.app-drawer-guide-header p,
.app-drawer-section-header p {
    margin: 0;
}

.app-drawer-nav {
    display: grid;
    gap: var(--space-2);
}

.app-drawer-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 2.55rem;
    padding: 0.64rem 0.82rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-strong);
    background: var(--app-surface-muted);
    color: var(--app-text-body);
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--app-surface-workbench-shadow);
    transition:
        transform var(--motion-duration-fast) var(--motion-ease-standard),
        border-color var(--motion-duration-fast) var(--motion-ease-standard),
        background-color var(--motion-duration-fast) var(--motion-ease-standard),
        box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}

.app-drawer-link:hover {
    transform: translateY(var(--motion-lift-hover));
    border-color: var(--app-brand-border);
    background: var(--app-surface-muted-strong);
    box-shadow: var(--shadow-soft);
}

.app-drawer-link.active {
    border-color: var(--app-brand-border);
    background: var(--app-surface-selected);
    color: var(--app-text-strong);
}

.app-shell[data-ui-theme="dark"] .app-header,
.app-shell[data-ui-theme="dark"] .app-drawer-card,
.app-shell[data-ui-theme="dark"] .hero-panel,
.app-shell[data-ui-theme="dark"] .panel-card,
.app-shell[data-ui-theme="dark"] .page-orientation-panel,
.app-shell[data-ui-theme="dark"] .search-profile-panel,
.app-shell[data-ui-theme="dark"] .search-profile-section,
.app-shell[data-ui-theme="dark"] .settings-section,
.app-shell[data-ui-theme="dark"] .workspace-tools-panel,
.app-shell[data-ui-theme="dark"] .context-card,
.app-shell[data-ui-theme="dark"] .inspector-panel,
.app-shell[data-ui-theme="dark"] .inspector-fold-panel,
.app-shell[data-ui-theme="dark"] .inspector-resource-card,
.app-shell[data-ui-theme="dark"] .inspector-fold-body > .detail-section {
    border-color: rgba(148, 163, 184, 0.16);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)),
        linear-gradient(180deg, rgba(19, 33, 53, 0.98), rgba(11, 18, 32, 0.96));
    box-shadow: var(--elevation-raised);
    color: var(--app-text-body);
}

.app-shell[data-ui-theme="dark"] .brand-wordmark-support {
    color: #c7d3e3;
}

.app-shell[data-ui-theme="dark"] .brand-wordmark-product {
    background: linear-gradient(135deg, #93c5fd, #5eead4 82%);
    -webkit-background-clip: text;
    background-clip: text;
}

.app-shell[data-ui-theme="dark"] h1,
.app-shell[data-ui-theme="dark"] h2,
.app-shell[data-ui-theme="dark"] h3,
.app-shell[data-ui-theme="dark"] h4,
.app-shell[data-ui-theme="dark"] h5,
.app-shell[data-ui-theme="dark"] strong,
.app-shell[data-ui-theme="dark"] .breadcrumb-current,
.app-shell[data-ui-theme="dark"] .breadcrumb-link,
.app-shell[data-ui-theme="dark"] .app-drawer-link.active,
.app-shell[data-ui-theme="dark"] .app-drawer-title {
    color: var(--app-text-strong);
}

.app-shell[data-ui-theme="dark"] .muted,
.app-shell[data-ui-theme="dark"] .compact-copy,
.app-shell[data-ui-theme="dark"] .hero-text,
.app-shell[data-ui-theme="dark"] .context-meta,
.app-shell[data-ui-theme="dark"] .inspector-fold-summary,
.app-shell[data-ui-theme="dark"] .identity-pill {
    color: var(--app-text-muted);
}

.app-shell[data-ui-theme="dark"] .live-surface-panel,
.app-shell[data-ui-theme="dark"] .live-surface-card {
    border-color: rgba(96, 165, 250, 0.26);
    background: linear-gradient(180deg, rgba(8, 16, 30, 0.995), rgba(4, 10, 20, 0.99));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 22px 40px rgba(2, 6, 23, 0.36);
}

.app-shell[data-ui-theme="dark"] .live-surface-kicker {
    background: rgba(59, 130, 246, 0.18);
    color: #bfdbfe;
}

.app-shell[data-ui-theme="dark"] .workspace-breadcrumbs,
.app-shell[data-ui-theme="dark"] .app-wallboard-header {
    border-color: rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(11, 18, 32, 0.96));
    box-shadow: var(--elevation-card);
}

.app-shell[data-ui-theme="dark"] .hero-panel {
    background-image: linear-gradient(135deg, rgba(30, 64, 175, 0.18), rgba(13, 148, 136, 0.14));
}

.app-shell[data-ui-theme="dark"] .policy-card,
.app-shell[data-ui-theme="dark"] .module-card,
.app-shell[data-ui-theme="dark"] .page-orientation-card,
.app-shell[data-ui-theme="dark"] .action-center-entry,
.app-shell[data-ui-theme="dark"] .first-run-tour-panel,
.app-shell[data-ui-theme="dark"] .toast-card {
    border-color: rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(19, 33, 53, 0.98), rgba(15, 23, 42, 0.96));
    box-shadow: var(--elevation-card);
}

.app-shell[data-ui-theme="dark"] .page-orientation-panel,
.app-shell[data-ui-theme="dark"] .workspace-tools-panel,
.app-shell[data-ui-theme="dark"] .settings-section,
.app-shell[data-ui-theme="dark"] .search-profile-section,
.app-shell[data-ui-theme="dark"] .group-wallboard-toolbar,
.app-shell[data-ui-theme="dark"] .groups-panel-wallboard,
.app-shell[data-ui-theme="dark"] .group-builder-panel,
.app-shell[data-ui-theme="dark"] .group-directory-panel,
.app-shell[data-ui-theme="dark"] .group-monitor-panel,
.app-shell[data-ui-theme="dark"] .callout,
.app-shell[data-ui-theme="dark"] .compact-callout,
.app-shell[data-ui-theme="dark"] .shell-status-callout,
.app-shell[data-ui-theme="dark"] .action-center-panel {
    border-color: rgba(96, 165, 250, 0.18);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(11, 18, 32, 0.96));
    box-shadow: var(--elevation-raised);
}

.app-shell[data-ui-theme="dark"] .page-orientation-panel[open] summary,
.app-shell[data-ui-theme="dark"] .workspace-tools-panel[open] summary,
.app-shell[data-ui-theme="dark"] .group-panel-fold[open] > .group-panel-summary {
    border-color: rgba(96, 165, 250, 0.18);
    background: linear-gradient(180deg, rgba(19, 33, 53, 0.9), rgba(15, 23, 42, 0.84));
}

.app-shell[data-ui-theme="dark"] .breadcrumb-link {
    border-color: rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 42, 0.84);
    color: var(--app-text-strong);
}

.app-shell[data-ui-theme="dark"] .breadcrumb-current {
    background: rgba(37, 99, 235, 0.2);
    color: var(--app-text-strong);
}

.app-shell[data-ui-theme="dark"] .command-launch-button,
.app-shell[data-ui-theme="dark"] .app-wallboard-exit {
    border-color: rgba(96, 165, 250, 0.24);
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.24), rgba(13, 148, 136, 0.16));
    color: var(--app-text-strong);
}

.app-shell[data-ui-theme="dark"] .command-launch-button:hover,
.app-shell[data-ui-theme="dark"] .app-wallboard-exit:hover {
    border-color: rgba(125, 211, 252, 0.3);
}

.app-shell[data-ui-theme="dark"] .command-palette-title,
.app-shell[data-ui-theme="dark"] .command-palette-section-title,
.app-shell[data-ui-theme="dark"] .command-palette-badge {
    color: var(--app-text-strong);
}

.app-shell[data-ui-theme="dark"] .command-palette-badge {
    background: rgba(30, 64, 175, 0.2);
}

.app-shell[data-ui-theme="dark"] .status-chip.neutral {
    background: rgba(148, 163, 184, 0.12);
    color: var(--app-text-muted);
    border-color: rgba(148, 163, 184, 0.2);
}

.app-shell[data-ui-theme="dark"] .status-chip.success {
    background: rgba(16, 185, 129, 0.16);
    border-color: rgba(16, 185, 129, 0.24);
}

.app-shell[data-ui-theme="dark"] .status-chip.warning {
    background: rgba(245, 158, 11, 0.16);
    border-color: rgba(245, 158, 11, 0.24);
}

.app-shell[data-ui-theme="dark"] .status-chip.danger {
    background: rgba(239, 68, 68, 0.16);
    border-color: rgba(239, 68, 68, 0.24);
}

.app-shell[data-ui-theme="dark"] .mode-toggle-group {
    border-color: rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.84);
}

.app-shell[data-ui-theme="dark"] .mode-toggle-button {
    color: var(--app-text-muted);
}

.app-shell[data-ui-theme="dark"] .mode-toggle-button.active {
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.24), rgba(13, 148, 136, 0.16));
    color: var(--app-text-strong);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.2);
}

.app-shell[data-ui-theme="dark"] .command-palette-suggestion {
    border-color: rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(19, 33, 53, 0.98), rgba(15, 23, 42, 0.96));
}

.app-shell[data-ui-theme="dark"] .command-palette-suggestion:hover,
.app-shell[data-ui-theme="dark"] .command-palette-suggestion.active {
    border-color: rgba(96, 165, 250, 0.28);
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.24), rgba(13, 148, 136, 0.16));
}

.app-shell[data-ui-theme="dark"] .warning-callout {
    background: linear-gradient(180deg, rgba(69, 26, 3, 0.82), rgba(15, 23, 42, 0.96));
    border-color: rgba(245, 158, 11, 0.26);
}

.app-shell[data-ui-theme="dark"] .callout-success {
    background: linear-gradient(180deg, rgba(6, 78, 59, 0.82), rgba(15, 23, 42, 0.96));
    border-color: rgba(16, 185, 129, 0.24);
}

.app-shell[data-ui-theme="dark"] .callout,
.app-shell[data-ui-theme="dark"] .empty-state-card,
.app-shell[data-ui-theme="dark"] .setup-guide-card,
.app-shell[data-ui-theme="dark"] .setup-command-card,
.app-shell[data-ui-theme="dark"] .explorer-utility-panel,
.app-shell[data-ui-theme="dark"] .metrics-summary-block,
.app-shell[data-ui-theme="dark"] .scope-switch-bar,
.app-shell[data-ui-theme="dark"] .explorer-query-workbench,
.app-shell[data-ui-theme="dark"] .saved-view-shell,
.app-shell[data-ui-theme="dark"] .group-create-panel,
.app-shell[data-ui-theme="dark"] .table-shell,
.app-shell[data-ui-theme="dark"] .transparency-panel,
.app-shell[data-ui-theme="dark"] .transparency-command,
.app-shell[data-ui-theme="dark"] .incident-selection-bar,
.app-shell[data-ui-theme="dark"] .group-monitor-refresh-controls,
.app-shell[data-ui-theme="dark"] .live-refresh-toggle {
    color: var(--app-text-body);
}

.app-shell[data-ui-theme="dark"] .callout strong,
.app-shell[data-ui-theme="dark"] .callout span,
.app-shell[data-ui-theme="dark"] .callout p,
.app-shell[data-ui-theme="dark"] .callout li,
.app-shell[data-ui-theme="dark"] .empty-state-card strong,
.app-shell[data-ui-theme="dark"] .empty-state-card p,
.app-shell[data-ui-theme="dark"] .empty-state-card span {
    color: inherit;
}

.app-shell[data-ui-theme="dark"] .fact-grid div,
.app-shell[data-ui-theme="dark"] .group-monitor-fact-grid div,
.app-shell[data-ui-theme="dark"] .metrics-summary-block,
.app-shell[data-ui-theme="dark"] .setup-guide-card,
.app-shell[data-ui-theme="dark"] .setup-command-card,
.app-shell[data-ui-theme="dark"] .explorer-utility-panel,
.app-shell[data-ui-theme="dark"] .scope-switch-bar,
.app-shell[data-ui-theme="dark"] .explorer-query-workbench,
.app-shell[data-ui-theme="dark"] .saved-view-shell,
.app-shell[data-ui-theme="dark"] .group-create-panel,
.app-shell[data-ui-theme="dark"] .group-form-section,
.app-shell[data-ui-theme="dark"] .group-builder-utility,
.app-shell[data-ui-theme="dark"] .group-builder-utility-card,
.app-shell[data-ui-theme="dark"] .group-monitor-card,
.app-shell[data-ui-theme="dark"] .group-monitor-section-card,
.app-shell[data-ui-theme="dark"] .group-monitor-card-strong,
.app-shell[data-ui-theme="dark"] .transparency-command,
.app-shell[data-ui-theme="dark"] .incident-selection-bar,
.app-shell[data-ui-theme="dark"] .group-monitor-refresh-controls,
.app-shell[data-ui-theme="dark"] .live-refresh-toggle {
    border-color: rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(19, 33, 53, 0.98), rgba(15, 23, 42, 0.96));
    box-shadow: var(--elevation-card);
}

.app-shell[data-ui-theme="dark"] .fact-grid dt,
.app-shell[data-ui-theme="dark"] .field-label,
.app-shell[data-ui-theme="dark"] .group-form-section-heading strong,
.app-shell[data-ui-theme="dark"] .group-monitor-card-heading h4,
.app-shell[data-ui-theme="dark"] .match-explanation-list li,
.app-shell[data-ui-theme="dark"] .group-monitor-list li,
.app-shell[data-ui-theme="dark"] .group-monitor-list strong,
.app-shell[data-ui-theme="dark"] .metrics-section-heading h5 {
    color: var(--app-text-body);
}

.app-shell[data-ui-theme="dark"] .group-monitor-list li {
    border-bottom-color: rgba(148, 163, 184, 0.12);
}

.app-shell[data-ui-theme="dark"] .scope-switch-copy strong,
.app-shell[data-ui-theme="dark"] .scope-switch-copy p,
.app-shell[data-ui-theme="dark"] .saved-view-copy,
.app-shell[data-ui-theme="dark"] .saved-view-status,
.app-shell[data-ui-theme="dark"] .group-form-section-heading .compact-copy,
.app-shell[data-ui-theme="dark"] .group-field-hint,
.app-shell[data-ui-theme="dark"] .grouped-explorer-summary .compact-copy,
.app-shell[data-ui-theme="dark"] .resource-pagination-bar .compact-copy,
.app-shell[data-ui-theme="dark"] .live-refresh-controls .compact-copy,
.app-shell[data-ui-theme="dark"] .group-monitor-refresh-controls .compact-copy,
.app-shell[data-ui-theme="dark"] .transparency-copy,
.app-shell[data-ui-theme="dark"] .table-subtext {
    color: var(--app-text-muted);
}

.app-shell[data-ui-theme="dark"] .group-search-chip,
.app-shell[data-ui-theme="dark"] .kind-chip-toggle span {
    border-color: rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.88);
    color: var(--app-text-body);
}

.app-shell[data-ui-theme="dark"] .group-search-chip:hover,
.app-shell[data-ui-theme="dark"] .kind-chip-toggle:hover span {
    border-color: rgba(96, 165, 250, 0.28);
    background: rgba(19, 33, 53, 0.96);
}

.app-shell[data-ui-theme="dark"] .kind-chip-toggle input:checked + span {
    border-color: rgba(96, 165, 250, 0.3);
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.24), rgba(13, 148, 136, 0.16));
    color: var(--app-text-strong);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.18);
}

.app-shell[data-ui-theme="dark"] .group-monitor-actions .action-button {
    background: rgba(148, 163, 184, 0.12) !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
    color: var(--app-text-body) !important;
    -webkit-text-fill-color: var(--app-text-body);
}

.app-shell[data-ui-theme="dark"] .wallboard-status-banner,
.app-shell[data-ui-theme="dark"] .wallboard-alert-card {
    border-color: rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(19, 33, 53, 0.98), rgba(15, 23, 42, 0.96));
    box-shadow: var(--elevation-card);
}

.app-shell[data-ui-theme="dark"] .wallboard-status-banner.success,
.app-shell[data-ui-theme="dark"] .wallboard-alert-card.success {
    border-color: rgba(16, 185, 129, 0.28);
    background: linear-gradient(180deg, rgba(6, 78, 59, 0.82), rgba(15, 23, 42, 0.96));
}

.app-shell[data-ui-theme="dark"] .wallboard-status-banner.warning,
.app-shell[data-ui-theme="dark"] .wallboard-alert-card.warning {
    border-color: rgba(245, 158, 11, 0.3);
    background: linear-gradient(180deg, rgba(69, 26, 3, 0.82), rgba(15, 23, 42, 0.96));
}

.app-shell[data-ui-theme="dark"] .wallboard-status-banner.danger,
.app-shell[data-ui-theme="dark"] .wallboard-alert-card.danger {
    border-color: rgba(248, 113, 113, 0.32);
    background: linear-gradient(180deg, rgba(69, 10, 10, 0.84), rgba(15, 23, 42, 0.96));
}

.app-shell[data-ui-theme="dark"] .wallboard-status-copy strong,
.app-shell[data-ui-theme="dark"] .wallboard-status-summary,
.app-shell[data-ui-theme="dark"] .wallboard-alert-card strong {
    color: var(--app-text-strong);
}

.app-shell[data-ui-theme="dark"] .wallboard-status-copy,
.app-shell[data-ui-theme="dark"] .wallboard-status-meta,
.app-shell[data-ui-theme="dark"] .wallboard-alert-card,
.app-shell[data-ui-theme="dark"] .wallboard-alert-card .compact-copy {
    color: var(--app-text-body);
}

.app-shell[data-ui-theme="dark"] .wallboard-status-eyebrow,
.app-shell[data-ui-theme="dark"] .wallboard-alert-eyebrow {
    background: rgba(148, 163, 184, 0.12);
    color: var(--app-text-muted);
}

.app-shell[data-ui-theme="dark"] .pill-list li,
.app-shell[data-ui-theme="dark"] code {
    background: rgba(15, 23, 42, 0.84);
    color: var(--app-text-strong);
}

.app-shell[data-ui-theme="dark"] .identity-pill {
    border-color: rgba(148, 163, 184, 0.18);
    background: rgba(148, 163, 184, 0.08);
    color: var(--app-text-muted);
}

.app-shell[data-ui-theme="dark"] .context-card,
.app-shell[data-ui-theme="dark"] .context-card *,
.app-shell[data-ui-theme="dark"] .context-card .context-meta {
    color: var(--app-text-body) !important;
    -webkit-text-fill-color: var(--app-text-body);
}

.app-shell[data-ui-theme="dark"] .context-card {
    border-color: rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(19, 33, 53, 0.98), rgba(15, 23, 42, 0.96));
    box-shadow: var(--elevation-card);
}

.app-shell[data-ui-theme="dark"] .context-card.selected {
    border-color: rgba(96, 165, 250, 0.28);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.2), 0 10px 18px rgba(2, 8, 23, 0.24);
    background: linear-gradient(180deg, rgba(30, 64, 175, 0.24), rgba(15, 23, 42, 0.98));
}

.app-shell[data-ui-theme="dark"] .text-input,
.app-shell[data-ui-theme="dark"] .select-input,
.app-shell[data-ui-theme="dark"] .textarea-input {
    border-color: rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 42, 0.9);
    color: var(--app-text-strong);
}

.app-shell[data-ui-theme="dark"] .text-input:disabled,
.app-shell[data-ui-theme="dark"] .select-input:disabled,
.app-shell[data-ui-theme="dark"] .textarea-input:disabled {
    background: rgba(19, 33, 53, 0.78);
}

.app-shell[data-ui-theme="dark"] .transparency-panel summary,
.app-shell[data-ui-theme="dark"] .inspector-fold-panel summary,
.app-shell[data-ui-theme="dark"] .raw-manifest-panel summary,
.app-shell[data-ui-theme="dark"] .dependency-graph-panel summary,
.app-shell[data-ui-theme="dark"] .timeline-panel summary,
.app-shell[data-ui-theme="dark"] .log-controls-panel summary,
.app-shell[data-ui-theme="dark"] .workspace-tools-panel summary,
.app-shell[data-ui-theme="dark"] .group-panel-summary {
    color: var(--app-text-strong);
}

.app-shell[data-ui-theme="dark"] .transparency-panel[open] summary,
.app-shell[data-ui-theme="dark"] .inspector-fold-panel[open] summary,
.app-shell[data-ui-theme="dark"] .raw-manifest-panel[open] summary,
.app-shell[data-ui-theme="dark"] .dependency-graph-panel[open] summary,
.app-shell[data-ui-theme="dark"] .timeline-panel[open] summary,
.app-shell[data-ui-theme="dark"] .log-controls-panel[open] summary,
.app-shell[data-ui-theme="dark"] .group-panel-fold[open] > .group-panel-summary {
    border-color: rgba(148, 163, 184, 0.14);
    background: rgba(148, 163, 184, 0.08);
}

.app-shell[data-ui-theme="dark"] .table-shell,
.app-shell[data-ui-theme="dark"] .transparency-panel,
.app-shell[data-ui-theme="dark"] .inline-explanation-panel,
.app-shell[data-ui-theme="dark"] .work-canvas-rail-panel {
    border-color: rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(11, 18, 32, 0.96));
    box-shadow: var(--elevation-card);
}

.app-shell[data-ui-theme="dark"] .work-canvas-rail-panel summary {
    color: var(--app-text-strong);
}

.app-shell[data-ui-theme="dark"] .work-canvas-rail-panel summary::before {
    color: var(--app-text-muted);
}

.app-shell[data-ui-theme="dark"] .work-canvas-rail-panel[open] > summary::before {
    color: var(--app-text-strong);
}

.app-shell[data-ui-theme="dark"] .work-canvas-rail-panel[open] summary {
    border-color: rgba(148, 163, 184, 0.14);
    background: rgba(148, 163, 184, 0.08);
}

.app-shell[data-ui-theme="dark"] .work-canvas-rail-summary {
    color: var(--app-text-muted);
}

.app-shell[data-ui-theme="dark"] .resource-table th,
.app-shell[data-ui-theme="dark"] .resource-table td,
.app-shell[data-ui-theme="dark"] .resource-table tbody tr.resource-group-row td,
.app-shell[data-ui-theme="dark"] .resource-table tbody tr.context-group-row td,
.app-shell[data-ui-theme="dark"] .resource-table tbody tr.namespace-group-row td {
    border-color: rgba(148, 163, 184, 0.12);
    color: var(--app-text-body);
}

.app-shell[data-ui-theme="dark"] .resource-table th {
    background: var(--surface-foundation-muted);
    color: var(--app-text-muted);
}

.app-shell[data-ui-theme="dark"] .resource-table tbody tr.resource-row:hover {
    background: rgba(30, 64, 175, 0.16);
}

.app-shell[data-ui-theme="dark"] .resource-table tbody tr.selected {
    background: rgba(30, 64, 175, 0.22);
}

.app-shell[data-ui-theme="dark"] .resource-table tbody tr.context-group-row td {
    background: rgba(30, 64, 175, 0.14);
}

.app-shell[data-ui-theme="dark"] .resource-table tbody tr.namespace-group-row td {
    background: rgba(13, 148, 136, 0.1);
}

.app-shell[data-ui-theme="dark"] :is(.live-surface-panel, .live-surface-card) .log-workbench,
.app-shell[data-ui-theme="dark"] :is(.live-surface-panel, .live-surface-card) .log-output-shell {
    border-color: rgba(96, 165, 250, 0.26);
    background: linear-gradient(180deg, rgba(30, 50, 82, 0.99), rgba(20, 38, 65, 0.985));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 14px 28px rgba(2, 6, 23, 0.22);
}

.app-shell[data-ui-theme="dark"] .inspector-panel {
    border-color: rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(11, 18, 32, 0.96));
    box-shadow: var(--elevation-card);
}

.app-shell[data-ui-theme="dark"] :is(.inspector-fold-panel, .raw-manifest-panel, .dependency-graph-panel, .timeline-panel, .log-controls-panel) {
    border-color: rgba(148, 163, 184, 0.24);
    background: linear-gradient(180deg, rgba(28, 47, 77, 0.99), rgba(19, 35, 59, 0.985));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 14px 28px rgba(2, 6, 23, 0.2);
}

.app-shell[data-ui-theme="dark"] .inspector-resource-card,
.app-shell[data-ui-theme="dark"] .inspector-fold-body > .detail-section,
.app-shell[data-ui-theme="dark"] .timeline-content-panel,
.app-shell[data-ui-theme="dark"] .log-workbench,
.app-shell[data-ui-theme="dark"] .log-output-shell,
.app-shell[data-ui-theme="dark"] .log-entry-card,
.app-shell[data-ui-theme="dark"] .log-entry-detail,
.app-shell[data-ui-theme="dark"] .detail-grid div,
.app-shell[data-ui-theme="dark"] .dependency-root-card,
.app-shell[data-ui-theme="dark"] .timeline-insights,
.app-shell[data-ui-theme="dark"] .timeline-event-card,
.app-shell[data-ui-theme="dark"] .related-card,
.app-shell[data-ui-theme="dark"] .log-group-card {
    border-color: rgba(148, 163, 184, 0.28);
    background: linear-gradient(180deg, rgba(39, 63, 101, 0.995), rgba(27, 47, 78, 0.985));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 12px 24px rgba(2, 6, 23, 0.18);
}

.app-shell[data-ui-theme="dark"] .timeline-content-panel {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.app-shell[data-ui-theme="dark"] .inspector-resource-card,
.app-shell[data-ui-theme="dark"] .dependency-root-card,
.app-shell[data-ui-theme="dark"] .timeline-insights {
    background: linear-gradient(180deg, rgba(22, 39, 63, 0.98), rgba(15, 23, 42, 0.95));
}

.app-shell[data-ui-theme="dark"] .related-card,
.app-shell[data-ui-theme="dark"] .dependency-root-card {
    border-color: rgba(191, 219, 254, 0.3);
    background: linear-gradient(180deg, rgba(76, 112, 165, 0.995), rgba(49, 79, 123, 0.99));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 16px 30px rgba(2, 6, 23, 0.22);
}

.app-shell[data-ui-theme="dark"] .log-group-card.log-severity-info {
    border-color: rgba(96, 165, 250, 0.2);
    background: linear-gradient(180deg, rgba(20, 41, 69, 0.98), rgba(15, 23, 42, 0.95));
}

.app-shell[data-ui-theme="dark"] .log-group-card.log-severity-warning {
    border-color: rgba(245, 158, 11, 0.24);
    background: linear-gradient(180deg, rgba(55, 38, 16, 0.98), rgba(15, 23, 42, 0.95));
}

.app-shell[data-ui-theme="dark"] .log-group-card.log-severity-danger {
    border-color: rgba(248, 113, 113, 0.24);
    background: linear-gradient(180deg, rgba(63, 26, 31, 0.98), rgba(15, 23, 42, 0.95));
}

.app-shell[data-ui-theme="dark"] .log-group-card.log-severity-debug,
.app-shell[data-ui-theme="dark"] .log-group-card.log-severity-trace {
    border-color: rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, rgba(26, 35, 49, 0.98), rgba(15, 23, 42, 0.95));
}

.app-shell[data-ui-theme="dark"] .log-entry-card.selected {
    border-color: rgba(96, 165, 250, 0.3);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14);
}

.app-shell[data-ui-theme="dark"] .inspector-resource-headline h3,
.app-shell[data-ui-theme="dark"] .detail-section h4,
.app-shell[data-ui-theme="dark"] .detail-grid dd,
.app-shell[data-ui-theme="dark"] .log-group-header h5,
.app-shell[data-ui-theme="dark"] .log-entry-message {
    color: var(--app-text-strong);
}

.app-shell[data-ui-theme="dark"] .detail-summary,
.app-shell[data-ui-theme="dark"] .log-toolbar-support {
    border-color: rgba(148, 163, 184, 0.12);
}

.app-shell[data-ui-theme="dark"] .log-controls-panel summary,
.app-shell[data-ui-theme="dark"] .work-canvas-rail-panel summary {
    background: rgba(8, 16, 31, 0.38);
}

.app-shell[data-ui-theme="dark"] .log-controls-panel[open] summary,
.app-shell[data-ui-theme="dark"] .work-canvas-rail-panel[open] summary {
    background: rgba(8, 16, 31, 0.56);
}

.app-shell[data-ui-theme="dark"] .detail-subsection {
    border-color: rgba(148, 163, 184, 0.26);
    background: linear-gradient(180deg, rgba(28, 47, 77, 0.99), rgba(19, 35, 59, 0.985));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 14px 28px rgba(2, 6, 23, 0.2);
}

.app-shell[data-ui-theme="dark"] .related-card-button:hover {
    background: rgba(30, 64, 175, 0.14);
    border-color: rgba(96, 165, 250, 0.2);
    box-shadow: 0 10px 24px rgba(2, 8, 23, 0.28);
}

.guidance-extended {
    display: none;
}

.app-shell[data-help-verbosity="standard"] .guidance-copy {
    display: -webkit-box;
    max-width: 48ch;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.app-shell[data-help-verbosity="concise"] .guidance-copy {
    display: none !important;
}

.app-shell[data-help-verbosity="standard"] .section-kicker,
.app-shell[data-help-verbosity="concise"] .section-kicker {
    display: none;
}

.app-shell[data-help-verbosity="extra"] .guidance-extended {
    display: block;
}

.app-drawer-command-link {
    width: 100%;
    justify-content: space-between;
    font: inherit;
    cursor: pointer;
}

.app-drawer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.app-header {
    display: flex;
    justify-content: space-between;
    gap: var(--space-6);
    align-items: center;
    flex-wrap: wrap;
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-8);
}

.app-header-copy {
    display: grid;
    gap: var(--space-2);
    min-width: min(100%, 24rem);
}

.shell-brand-row {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.shell-experimental-chip {
    align-self: flex-start;
}

.app-header-copy .compact-copy {
    margin: 0;
    max-width: 50ch;
}

.app-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
}

.app-header-status-panel {
    display: grid;
    gap: 0.2rem;
    min-width: 8rem;
    justify-items: end;
    text-align: right;
}

.shell-status-banner {
    margin-bottom: var(--space-6);
}

.shell-status-callout {
    margin: 0;
}

.app-wallboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border: 1px solid rgba(16, 33, 54, 0.14);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.95));
    box-shadow: 0 18px 36px rgba(15, 23, 40, 0.08);
}

.app-wallboard-header h1 {
    margin: 0;
    font-size: clamp(1.45rem, 2.4vw, 2rem);
}

.app-wallboard-exit {
    display: inline-flex;
    align-items: center;
    min-height: var(--app-hit-target);
    padding: 0.7rem 0.95rem;
    border-radius: 999px;
    border: 1px solid rgba(8, 86, 163, 0.18);
    background: rgba(255, 255, 255, 0.92);
    color: #12314e;
    font-weight: 700;
    text-decoration: none;
    transition:
        transform var(--motion-duration-fast) var(--motion-ease-standard),
        box-shadow var(--motion-duration-fast) var(--motion-ease-standard),
        border-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.app-wallboard-exit:hover {
    transform: translateY(var(--motion-lift-hover));
    box-shadow: var(--shadow-soft);
    border-color: rgba(8, 86, 163, 0.28);
}

.command-launch-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.8rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(8, 86, 163, 0.18);
    background: linear-gradient(135deg, rgba(8, 86, 163, 0.1), rgba(11, 170, 159, 0.08));
    color: #12314e;
    font-weight: 700;
    cursor: pointer;
    transition:
        transform var(--motion-duration-fast) var(--motion-ease-standard),
        box-shadow var(--motion-duration-fast) var(--motion-ease-standard),
        border-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.command-launch-button:hover {
    transform: translateY(var(--motion-lift-hover));
    box-shadow: var(--shadow-soft);
    border-color: rgba(8, 86, 163, 0.28);
}

.connection-readiness-steps {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-5) 0;
}

.connection-readiness-step {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--app-surface-border);
    border-radius: var(--radius-md);
    background: var(--app-surface-muted);
}

.connection-readiness-step p {
    margin: 0;
}

.connection-readiness-step-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.action-center-launch-attention {
    border-color: rgba(8, 86, 163, 0.34);
    box-shadow: 0 0 0 0 rgba(8, 86, 163, 0.34);
    animation: action-center-attention-pulse 1.8s ease-in-out infinite;
}

.action-center-launch-attention .command-launch-hint,
.action-center-launch-attention kbd {
    border-color: rgba(8, 86, 163, 0.28);
    background: rgba(21, 94, 239, 0.14);
    color: #0b4ea2;
}

.app-shell[data-ui-theme="dark"] .action-center-launch-attention {
    border-color: rgba(96, 165, 250, 0.42);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.28), rgba(13, 148, 136, 0.18));
    box-shadow: 0 0 0 0 rgba(96, 165, 250, 0.36);
}

.app-shell[data-ui-theme="dark"] .action-center-launch-attention .command-launch-hint,
.app-shell[data-ui-theme="dark"] .action-center-launch-attention kbd {
    border-color: rgba(96, 165, 250, 0.28);
    background: rgba(37, 99, 235, 0.18);
    color: #dbeafe;
}

@keyframes action-center-attention-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(8, 86, 163, 0.28);
    }

    65% {
        box-shadow: 0 0 0 0.65rem rgba(8, 86, 163, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(8, 86, 163, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .action-center-launch-attention {
        animation: none;
    }
}

.command-launch-button kbd,
.command-launch-hint {
    font-family: var(--font-mono);
    font-size: var(--type-label);
    color: var(--app-text-muted);
}

.command-palette-backdrop {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: start center;
    padding: clamp(2rem, 8vh, 5rem) var(--space-4) var(--space-4);
    background: rgba(8, 15, 28, 0.34);
    backdrop-filter: blur(10px);
    z-index: 1000;
}

.action-center-backdrop {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: flex-end;
    background: rgba(8, 15, 28, 0.28);
    backdrop-filter: blur(8px);
    z-index: 990;
}

.action-center-panel {
    width: min(var(--layout-side-sheet-max), 100vw);
    min-height: 100vh;
    display: grid;
    align-content: start;
    gap: var(--space-4);
    padding: var(--space-5);
    border-left: 1px solid var(--border-brand);
    background: rgba(247, 250, 255, 0.98);
    box-shadow: var(--elevation-overlay);
    overflow-y: auto;
}

.action-center-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
}

.action-center-header-actions {
    display: flex;
    gap: var(--space-3);
}

.action-center-list {
    display: grid;
    gap: var(--space-4);
}

.action-center-entry {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-strong);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--elevation-card);
}

.action-center-entry-header {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    align-items: flex-start;
}

.action-center-entry-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
}

.action-center-resource {
    margin: 0;
}

.action-center-entry-resource-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.action-center-entry-resource-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
}

.action-center-entry-outcome-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
    gap: var(--space-3);
    margin: 0;
}

.action-center-entry-outcome-grid div {
    display: grid;
    gap: 0.15rem;
    padding: var(--space-2) var(--space-3);
    border: 1px solid rgba(16, 33, 54, 0.08);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.72);
}

.action-center-entry-outcome-grid dt {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.action-center-entry-outcome-grid dd {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-strong);
}

.action-center-entry-target-results {
    display: grid;
    gap: var(--space-3);
}

.action-center-entry-impact-snapshot {
    display: grid;
    gap: var(--space-3);
}

.action-center-entry-target-results summary {
    cursor: pointer;
}

.action-center-entry-impact-snapshot summary {
    cursor: pointer;
}

.action-center-target-result-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.action-center-entry-commands {
    display: grid;
    gap: var(--space-3);
}

.command-palette-panel {
    width: min(var(--layout-modal-max), 100%);
    max-height: min(88vh, calc(100vh - 3rem));
    display: grid;
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-brand);
    background: #ffffff;
    box-shadow: var(--elevation-overlay);
    overflow: hidden;
}

.command-palette-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}

.command-palette-copy {
    margin: 0;
    color: #52637a;
}

.command-palette-intent {
    display: grid;
    gap: var(--space-3);
    padding: 0.9rem 1rem;
    border: 1px solid rgba(16, 33, 54, 0.08);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(246, 250, 255, 0.92), rgba(255, 255, 255, 0.98));
}

.command-palette-intent-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.command-palette-intent-chip {
    display: inline-flex;
    align-items: center;
    min-height: 1.8rem;
    padding: 0.24rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(16, 33, 54, 0.08);
    background: rgba(8, 86, 163, 0.07);
    color: #44617f;
    font-size: var(--type-kicker);
    font-weight: 800;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.command-palette-input {
    min-height: 3.25rem;
    font-size: 1rem;
}

.command-palette-results {
    display: grid;
    gap: var(--space-4);
    min-height: 0;
    overflow: auto;
    align-content: start;
    padding-right: 0.2rem;
}

.command-palette-section {
    display: grid;
    gap: var(--space-2);
}

.command-palette-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding-inline: 0.2rem;
}

.command-palette-section-title {
    color: #27415d;
    font-size: var(--type-kicker);
    font-weight: 900;
    letter-spacing: var(--tracking-kicker);
    text-transform: uppercase;
}

.command-palette-section-copy {
    color: #52637a;
    font-size: var(--type-body-compact);
}

.command-palette-section-list {
    display: grid;
    gap: var(--space-2);
}

.command-palette-suggestion {
    width: 100%;
    display: grid;
    gap: 0.15rem;
    padding: 0.95rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(16, 33, 54, 0.08);
    background: #ffffff;
    text-align: left;
    cursor: pointer;
    transition:
        border-color var(--motion-duration-fast) var(--motion-ease-standard),
        background-color var(--motion-duration-fast) var(--motion-ease-standard),
        box-shadow var(--motion-duration-fast) var(--motion-ease-standard),
        transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.command-palette-suggestion:hover,
.command-palette-suggestion.active {
    border-color: rgba(8, 86, 163, 0.24);
    background: linear-gradient(135deg, rgba(8, 86, 163, 0.1), rgba(11, 170, 159, 0.08));
    box-shadow: var(--shadow-soft);
    transform: translateY(var(--motion-lift-hover));
}

.command-palette-title {
    color: #12314e;
    font-weight: 800;
}

.command-palette-panel .action-button.tertiary {
    --button-fg: #344054;
    background: rgba(16, 33, 54, 0.08);
    border-color: rgba(16, 33, 54, 0.16);
}

.command-palette-suggestion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.command-palette-badge,
.identity-pill,
.wallboard-status-eyebrow,
.wallboard-alert-eyebrow {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
}

.command-palette-badge {
    min-height: 1.8rem;
    padding: 0.24rem 0.55rem;
    background: rgba(8, 86, 163, 0.09);
    color: #44617f;
    font-size: var(--type-kicker);
    font-weight: 800;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.command-palette-subtitle {
    color: var(--app-text-muted);
    font-size: var(--type-body-compact);
    line-height: 1.45;
}

.app-header h1,
.hero-panel h2,
.panel-card h3,
.panel-card h4,
.panel-card h2 {
    margin: 0;
    font-family: var(--font-display);
    letter-spacing: var(--tracking-display);
    text-wrap: balance;
}

.app-header h1 {
    font-size: var(--type-page-title);
}

.app-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.app-main-wallboard {
    gap: var(--space-4);
}

.workspace-breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(16, 33, 54, 0.1);
    border-radius: var(--radius-md);
    background: var(--app-surface-solid-strong);
    box-shadow: 0 0.75rem 2rem rgba(15, 23, 40, 0.06);
}

.page-orientation-shell {
    margin-top: calc(var(--space-6) * -0.25);
}

.page-orientation-panel {
    overflow: hidden;
    border: 1px solid rgba(8, 86, 163, 0.16);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(250, 252, 255, 0.98), rgba(242, 247, 255, 0.96));
    box-shadow: var(--shadow-soft);
}

.page-orientation-panel summary {
    position: relative;
    display: block;
    margin: 0;
    padding: 1rem 1.15rem 1rem 3rem;
    cursor: pointer;
    list-style: none;
}

.page-orientation-panel summary::marker {
    content: "";
}

.page-orientation-panel summary::-webkit-details-marker {
    display: none;
}

.page-orientation-panel summary::before {
    content: "\25B8";
    position: absolute;
    left: 1.15rem;
    top: 1.15rem;
    color: var(--app-text-muted);
    transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.page-orientation-panel[open] summary::before {
    transform: rotate(90deg);
}

.page-orientation-panel[open] summary {
    border-bottom: 1px solid rgba(8, 86, 163, 0.14);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(246, 250, 255, 0.55));
}

.page-orientation-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--space-4);
}

.page-orientation-heading strong {
    display: block;
    font-family: var(--font-display);
    font-size: var(--type-heading-section);
    letter-spacing: var(--tracking-display);
    color: var(--app-text-strong);
}

.page-orientation-body {
    display: grid;
    gap: var(--space-4);
    padding: 1rem 1.15rem 1.15rem;
}

.page-orientation-summary {
    margin: 0;
    color: var(--app-text-strong);
    max-width: 78ch;
}

.page-orientation-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.page-orientation-card {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid rgba(16, 33, 54, 0.08);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.8);
}

.page-orientation-card strong,
.page-orientation-card p {
    margin: 0;
}

.breadcrumb-list {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
}

.breadcrumb-item:not(:last-child)::after {
    content: "/";
    color: var(--app-text-muted);
    font-weight: 600;
}

.breadcrumb-link,
.breadcrumb-current {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    border-radius: 999px;
    padding: 0.15rem 0.75rem;
    font-size: 0.93rem;
}

.breadcrumb-link {
    border: 1px solid rgba(16, 33, 54, 0.1);
    background: var(--app-surface-soft);
    color: #12314e;
    cursor: pointer;
}

.breadcrumb-current {
    background: rgba(21, 94, 239, 0.1);
    color: #12314e;
    font-weight: 600;
}

.breadcrumb-back-button {
    min-width: 0;
}

.hero-panel {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: var(--space-5);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    border-left: 0.25rem solid rgba(8, 86, 163, 0.22);
    background: var(--app-surface-muted-strong);
}

.startup-hero-panel {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}

.startup-hero-actions {
    display: grid;
    gap: var(--space-3);
    justify-items: start;
    align-content: start;
}

.startup-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.hero-panel h2 {
    font-size: var(--type-hero-title);
    margin-top: var(--space-1);
    max-width: 14ch;
    text-wrap: balance;
}

.hero-text,
.policy-card p,
.module-card p,
.muted,
.warning-copy {
    color: var(--app-text-support);
    line-height: 1.5;
    text-wrap: pretty;
}

.guidance-copy,
.hero-text,
.empty-state-copy,
.policy-card p,
.module-card p,
.connection-readiness-step p {
    max-width: 56ch;
}

.policy-stack,
.content-grid {
    display: grid;
    gap: var(--space-4);
}

.policy-card,
.module-card {
    padding: var(--space-5);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
    background: var(--app-surface-muted-strong);
    min-width: 0;
}

.policy-label,
.eyebrow,
.section-kicker,
.module-type {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--type-kicker);
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--app-text-support);
    opacity: 0.82;
}

.header-badges,
.section-heading,
.pill-list,
.module-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.section-heading {
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-strong);
    gap: var(--space-4);
}

.section-heading :is(h1, h2, h3, h4, strong),
.metrics-section-heading :is(h1, h2, h3, h4, strong),
.saved-group-directory-section-heading :is(h1, h2, h3, h4, strong),
.connection-readiness-step-header strong {
    color: var(--app-text-strong);
}

.section-heading > div {
    min-width: 0;
}

.ui-section-header-aside {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-2);
    min-width: 0;
}

.content-grid {
    grid-template-columns: 1.1fr 0.9fr;
}

.content-grid-wide {
    grid-template-columns: 1fr 1fr;
}

.panel-card {
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    min-width: 0;
    overflow: hidden;
    box-shadow: var(--elevation-card);
}

.app-shell[data-ui-density="compact"] .app-header,
.app-shell[data-ui-density="compact"] .hero-panel,
.app-shell[data-ui-density="compact"] .panel-card,
.app-shell[data-ui-density="compact"] .app-drawer-card {
    padding: var(--space-4);
}

.app-shell[data-ui-density="compact"] .app-drawer-link {
    min-height: 2.35rem;
    padding: 0.58rem 0.78rem;
}

.app-shell[data-ui-density="compact"] .status-chip {
    padding: 0.24rem 0.5rem;
    font-size: 0.72rem;
}

.app-shell[data-ui-density="incident"] .app-header,
.app-shell[data-ui-density="incident"] .hero-panel,
.app-shell[data-ui-density="incident"] .panel-card,
.app-shell[data-ui-density="incident"] .app-drawer-card {
    padding: var(--space-3);
}

.app-shell[data-ui-density="incident"] .app-drawer-link {
    min-height: 2.1rem;
    padding: 0.48rem 0.68rem;
}

.app-shell[data-ui-density="incident"] .app-header-copy,
.app-shell[data-ui-density="incident"] .hero-copy,
.app-shell[data-ui-density="incident"] .app-drawer-header {
    gap: var(--space-2);
}

.app-shell[data-ui-density="incident"] .status-chip {
    padding: 0.24rem 0.5rem;
    font-size: 0.74rem;
}

.groups-panel-wallboard {
    padding: var(--space-7);
    background: linear-gradient(180deg, rgba(245, 249, 255, 0.99), rgba(255, 255, 255, 0.98));
    box-shadow: var(--elevation-overlay);
}

.panel-card.narrow {
    max-width: var(--layout-panel-narrow-max);
}

.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 0.26rem 0.54rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 650;
    flex-shrink: 0;
    white-space: nowrap;
    line-height: 1.25;
    box-shadow: none;
}

.status-chip::before {
    content: none;
    display: none;
}

.status-chip.neutral {
    background: rgba(16, 33, 54, 0.06);
    color: var(--app-text-muted);
    border-color: rgba(16, 33, 54, 0.12);
}

.status-chip.success {
    background: var(--state-success-soft);
    background: rgba(16, 185, 129, 0.12);
    color: var(--state-success);
    border-color: rgba(16, 185, 129, 0.2);
}

.status-chip.warning {
    background: var(--state-warning-soft);
    background: rgba(245, 158, 11, 0.12);
    color: var(--state-warning);
    border-color: rgba(245, 158, 11, 0.22);
}

.status-chip.warning::before {
    content: "";
}

.status-chip.danger {
    background: rgba(239, 68, 68, 0.12);
    color: var(--state-danger);
    border-color: rgba(239, 68, 68, 0.22);
}

.status-chip.danger::before {
    content: "";
}

.guardrail-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: var(--space-3) 0;
}

.fact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin: 0;
}

.fact-grid div {
    padding: var(--space-4);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.78);
}

.fact-grid dt {
    font-size: var(--type-label);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--app-text-muted);
    margin-bottom: var(--space-2);
}

.fact-grid dd {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.pill-list {
    list-style: none;
    padding: 0;
    margin: var(--space-3) 0 0;
}

.pill-list li {
    padding: 0.32rem 0.62rem;
    border-radius: 999px;
    border: 1px solid rgba(16, 33, 54, 0.12);
    background: rgba(16, 33, 54, 0.05);
    color: var(--app-text-body);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    max-width: 100%;
    overflow-wrap: anywhere;
}

code {
    display: inline-block;
    max-width: 100%;
    padding: 0.3rem 0.55rem;
    border-radius: var(--radius-sm);
    background: rgba(16, 33, 54, 0.08);
    color: #0f1728;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: anywhere;
}

.value-code {
    display: block;
    width: 100%;
    border-radius: var(--radius-md);
    padding: 0.7rem 0.85rem;
    border: 1px solid rgba(16, 33, 54, 0.08);
    background: linear-gradient(180deg, #122033, #0f1728);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color: #e4ebf7;
}

.syntax-token {
    color: inherit;
}

.syntax-token-executable,
.syntax-token-key {
    color: #93c5fd;
}

.syntax-token-keyword {
    color: #fbbf24;
}

.syntax-token-flag {
    color: #fca5a5;
}

.syntax-token-resource {
    color: #5eead4;
}

.syntax-token-string {
    color: #86efac;
}

.syntax-token-number {
    color: #fdba74;
}

.syntax-token-literal {
    color: #c4b5fd;
    font-weight: 700;
}

.syntax-token-punctuation {
    color: rgba(226, 232, 240, 0.72);
}

.subsection {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(16, 33, 54, 0.12);
}

.subsection.compact {
    margin-top: var(--space-4);
}

.subsection h4 {
    margin: 0 0 var(--space-3);
}

.module-grid {
    align-items: stretch;
}

.module-card {
    flex: 1 1 18rem;
}

.warning-copy {
    margin-bottom: var(--space-2);
    color: var(--danger);
}

.warning-copy.compact {
    margin: 0;
}

.match-explanation-list {
    margin: 0.75rem 0 0;
    padding-left: 1.125rem;
    display: grid;
    gap: 0.35rem;
}

.match-explanation-list li {
    color: var(--app-text-muted);
}

.stack-form,
.filter-grid,
.warning-list,
.context-list {
    display: grid;
    gap: var(--space-4);
}

.stack-form {
    margin-top: var(--space-5);
}

.field-stack {
    display: grid;
    gap: var(--space-3);
}

.field-row,
.action-row {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    align-items: center;
    margin-top: var(--space-4);
}

.field-label {
    display: inline-block;
    margin-bottom: var(--space-2);
    font-size: var(--type-label);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--app-text-muted);
}

.text-input,
.select-input,
.textarea-input {
    width: 100%;
    min-height: 2.9rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.96);
    color: #0f1728;
    font: inherit;
    padding: 0.7rem 0.85rem;
    transition:
        border-color var(--motion-duration-fast) var(--motion-ease-standard),
        box-shadow var(--motion-duration-fast) var(--motion-ease-standard),
        background-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.textarea-input {
    min-height: 6.5rem;
    resize: vertical;
}

.text-input:hover,
.select-input:hover,
.textarea-input:hover {
    border-color: var(--border-strong);
}

.text-input:disabled,
.select-input:disabled,
.textarea-input:disabled {
    cursor: not-allowed;
    opacity: 0.7;
    background: rgba(248, 251, 255, 0.92);
}

.text-input:focus-visible,
.select-input:focus-visible,
.textarea-input:focus-visible {
    border-color: var(--state-info-border);
    box-shadow: 0 0 0 4px var(--app-focus-shadow);
}

.field-row .text-input {
    flex: 1 1 20rem;
}

.code-input {
    font-family: var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.stack-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.action-button.prominent {
    min-width: 13rem;
}

.form-hint {
    margin: 0;
}

.action-button {
    --button-fg: #0f1728;
    min-height: 2.9rem;
    border-radius: 999px;
    border: 1px solid transparent;
    padding: 0.7rem 1rem;
    font: inherit;
    font-weight: 700;
    color: var(--button-fg);
    -webkit-text-fill-color: var(--button-fg);
    forced-color-adjust: none;
    cursor: pointer;
    transition:
        transform var(--motion-duration-fast) var(--motion-ease-standard),
        box-shadow var(--motion-duration-fast) var(--motion-ease-standard),
        background-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.action-button,
.action-button * {
    color: var(--button-fg) !important;
    -webkit-text-fill-color: var(--button-fg);
}

.action-button:hover:not(:disabled) {
    transform: translateY(var(--motion-lift-hover));
}

.action-button:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

.action-button.primary {
    --button-fg: var(--button-primary-fg);
    background: var(--button-primary-bg);
    border-color: var(--button-primary-border);
    box-shadow: var(--shadow-soft);
}

.action-button.secondary {
    --button-fg: var(--button-secondary-fg);
    background: var(--button-secondary-bg);
    border-color: var(--button-secondary-border);
}

.action-button.tertiary {
    --button-fg: var(--button-tertiary-fg);
    background: var(--button-tertiary-bg);
    border-color: var(--button-tertiary-border);
}

.file-picker-button {
    position: relative;
    overflow: hidden;
}

.file-picker-button input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.file-picker-button[aria-disabled="True"] input[type="file"],
.file-picker-button[aria-disabled="true"] input[type="file"] {
    pointer-events: none;
}

.callout {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--state-info-border);
    background: linear-gradient(180deg, rgba(238, 245, 255, 0.98), rgba(255, 255, 255, 0.99));
    color: var(--color-neutral-900);
    margin-top: var(--space-4);
    box-shadow: 0 12px 24px rgba(15, 23, 40, 0.05);
}

.ui-callout-heading,
.failure-callout-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.ui-callout-heading-aside {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.callout-success {
    border-color: var(--state-success-border);
    background: var(--state-success-soft);
}

.compact-callout {
    padding: var(--space-3);
}

.empty-state-card {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--border-strong);
    background: linear-gradient(180deg, rgba(249, 251, 255, 0.98), rgba(255, 255, 255, 0.99));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    color: var(--color-neutral-900);
}

.empty-state-card::before {
    content: "Nothing here yet";
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--app-text-muted);
}

.empty-state-card.compact-empty-state {
    padding: var(--space-3) var(--space-4);
}

.empty-state-card > strong,
.empty-state-card > p,
.empty-state-card > span {
    margin: 0;
}

.empty-state-copy {
    color: var(--app-text-support);
}

.empty-state-card .message-list {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--app-text-support);
}

.app-shell[data-ui-theme="dark"] .empty-state-card {
    border-color: rgba(148, 163, 184, 0.22);
    background: linear-gradient(180deg, rgba(20, 33, 54, 0.98), rgba(15, 23, 42, 0.96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    color: var(--app-text-body);
}

.app-shell[data-ui-theme="dark"] .empty-state-card::before {
    color: var(--app-text-muted);
}

.app-shell[data-ui-theme="dark"] .empty-state-copy,
.app-shell[data-ui-theme="dark"] .empty-state-card .message-list {
    color: var(--app-text-support);
}

.inline-action {
    justify-self: start;
    width: fit-content;
}

.message-list {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--app-text-support);
    display: grid;
    gap: var(--space-2);
}

.message-list li {
    overflow-wrap: anywhere;
}

.inline-link {
    color: var(--color-accent-700);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

.inline-link:hover,
.inline-link:focus-visible {
    color: var(--color-accent-800);
}

.app-shell[data-ui-theme="dark"] .inline-link {
    color: var(--color-accent-300);
}

.app-shell[data-ui-theme="dark"] .inline-link:hover,
.app-shell[data-ui-theme="dark"] .inline-link:focus-visible {
    color: var(--color-accent-200);
}

.context-list {
    margin-top: var(--space-4);
}

.setup-guide-grid {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.setup-guide-card {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, 0.96);
}

.setup-step-list {
    padding-left: 1.25rem;
}

.setup-command-list {
    display: grid;
    gap: var(--space-3);
}

.setup-command-card {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid rgba(16, 33, 54, 0.08);
    background: rgba(248, 251, 255, 0.82);
}

.setup-command-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.setup-command-output {
    margin: 0;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: #0f1728;
    color: #dfe6f2;
    font-family: var(--font-mono);
    font-size: 0.83rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.context-card {
    width: 100%;
    text-align: left;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid rgba(16, 33, 54, 0.14);
    background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(248, 251, 255, 0.96));
    color: #0f1728 !important;
    -webkit-text-fill-color: #0f1728;
    forced-color-adjust: none;
    cursor: pointer;
    transition:
        border-color var(--motion-duration-fast) var(--motion-ease-standard),
        box-shadow var(--motion-duration-fast) var(--motion-ease-standard),
        transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.context-card,
.context-card * {
    color: #0f1728 !important;
    -webkit-text-fill-color: #0f1728;
}

.context-card:hover {
    transform: translateY(var(--motion-lift-hover));
    box-shadow: 0 16px 28px rgba(15, 23, 40, 0.09);
}

.context-card:disabled {
    cursor: not-allowed;
    opacity: 0.7;
    transform: none;
    box-shadow: none;
}

.context-card.selected {
    border-color: rgba(8, 86, 163, 0.35);
    box-shadow: inset 0 0 0 1px rgba(8, 86, 163, 0.16), 0 10px 18px rgba(15, 23, 40, 0.06);
    background: linear-gradient(180deg, rgba(8, 86, 163, 0.1), rgba(255, 255, 255, 0.98));
}

.context-header {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    align-items: center;
    margin-bottom: var(--space-2);
}

.context-meta,
.table-subtext {
    margin: 0;
    color: var(--app-text-muted);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.context-card .context-meta {
    color: var(--app-text-muted) !important;
    -webkit-text-fill-color: var(--app-text-muted);
}

.filter-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    gap: var(--space-4) var(--space-3);
}

.explorer-utility-panel {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    border: 1px solid rgba(16, 33, 54, 0.07);
    border-radius: var(--radius-lg);
    background: rgba(247, 249, 252, 0.82);
}

.explorer-utility-panel .section-kicker {
    margin: 0;
}

.explorer-query-workbench {
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    border: 1px solid rgba(8, 86, 163, 0.14);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, rgba(8, 86, 163, 0.045), rgba(255, 255, 255, 0.94)),
        rgba(255, 255, 255, 0.94);
    box-shadow: 0 16px 40px rgba(15, 23, 40, 0.05);
}

.explorer-query-workbench .filter-grid {
    margin-bottom: 0;
}

.saved-view-shell {
    display: grid;
    gap: var(--space-2);
    margin-bottom: 0;
    padding: var(--space-3);
    border: 1px solid rgba(16, 33, 54, 0.06);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.88);
}

.saved-view-bar {
    display: grid;
    grid-template-columns: minmax(12rem, 1.1fr) minmax(14rem, 1.2fr) auto;
    gap: var(--space-3);
    align-items: end;
}

.saved-view-select,
.saved-view-name {
    display: grid;
    gap: var(--space-1);
}

.saved-view-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.saved-view-actions .action-button {
    min-width: 7.5rem;
}

.saved-view-support {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.saved-view-copy,
.saved-view-status {
    margin: 0;
}

.group-create-panel {
    margin-bottom: 0;
    background: rgba(255, 255, 255, 0.72);
}

.group-create-grid,
.group-builder-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.groups-page-shell {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    margin-bottom: var(--space-5);
}

.groups-page-header-actions {
    display: grid;
    gap: var(--space-3);
    justify-items: end;
}

.mode-toggle-group {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem;
    border: 1px solid rgba(16, 33, 54, 0.1);
    border-radius: 999px;
    background: rgba(244, 248, 253, 0.92);
}

.mode-toggle-button {
    min-height: var(--app-hit-target);
    padding: 0.45rem 0.95rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--app-text-muted);
    font-weight: 700;
    cursor: pointer;
    transition:
        background-color var(--motion-duration-fast) var(--motion-ease-standard),
        color var(--motion-duration-fast) var(--motion-ease-standard),
        box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}

.mode-toggle-button.active {
    background: linear-gradient(135deg, rgba(8, 86, 163, 0.14), rgba(11, 170, 159, 0.1));
    color: #12314e;
    box-shadow: inset 0 0 0 1px rgba(8, 86, 163, 0.12);
}

.group-wallboard-toolbar {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    border: 1px solid rgba(16, 33, 54, 0.14);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(243, 248, 255, 0.98), rgba(255, 255, 255, 0.98));
    box-shadow: 0 18px 34px rgba(15, 23, 40, 0.07);
}

.group-wallboard-controls {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr);
    align-items: end;
}

.group-builder-panel,
.group-directory-panel,
.group-monitor-panel {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(249, 251, 255, 0.96));
    padding: 0;
    overflow: hidden;
    box-shadow: var(--elevation-card);
}

.group-builder-panel,
.group-directory-panel,
.group-monitor-panel,
.group-panel-body {
    display: grid;
    gap: var(--space-4);
}

.group-monitor-panel {
    background: linear-gradient(180deg, rgba(245, 249, 255, 0.99), rgba(255, 255, 255, 0.98));
    box-shadow: var(--elevation-raised);
}

.group-panel-summary {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 2.9rem;
    box-sizing: border-box;
    margin: 0;
    padding: 1rem var(--space-4) 1rem calc(var(--space-4) + 1.35rem);
    align-items: center;
    cursor: pointer;
    list-style: none;
}

.group-panel-summary::marker {
    content: "";
}

.group-panel-summary::-webkit-details-marker {
    display: none;
}

.group-panel-summary::before {
    content: "\25B8";
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.82rem;
    color: var(--app-text-muted);
    transition:
        transform var(--motion-duration-fast) var(--motion-ease-standard),
        color var(--motion-duration-fast) var(--motion-ease-standard);
}

.group-panel-fold[open] > .group-panel-summary::before {
    transform: translateY(-50%) rotate(90deg);
    color: #12314e;
}

.group-panel-fold[open] > .group-panel-summary {
    border-bottom: 1px solid rgba(16, 33, 54, 0.08);
    background: rgba(255, 255, 255, 0.36);
}

.group-panel-summary .context-header,
.group-panel-summary .section-heading {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

.group-panel-body {
    padding: var(--space-4);
}

.group-monitor-panel-wallboard {
    gap: var(--space-5);
}

.wallboard-monitor-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: minmax(0, 1.45fr) minmax(23rem, 0.95fr);
    align-items: start;
}

.wallboard-primary-column,
.wallboard-secondary-column {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
}

.group-directory-panel {
    order: -1;
}

.group-log-refresh-controls {
    min-width: min(100%, var(--layout-status-banner-max));
}

.group-monitor-refresh-controls {
    min-width: min(100%, var(--layout-status-banner-max));
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: rgba(242, 247, 253, 0.88);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), var(--elevation-live);
}

.group-monitor-refresh-controls .compact-copy {
    margin: 0;
    max-width: none;
    color: var(--app-text-support);
    white-space: nowrap;
}

.group-metrics-toolbar .heading-statuses {
    justify-self: end;
}

.group-log-refresh-copy {
    align-self: center;
    max-width: 22rem;
    margin: 0;
}

.group-builder-grid > label,
.group-create-grid > label {
    display: grid;
    gap: var(--space-1);
}

.group-title-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.group-title-grid > label {
    display: grid;
    gap: var(--space-1);
}

.group-builder-utility {
    display: grid;
    gap: var(--space-3);
    grid-column: 1 / -1;
    padding: var(--space-3);
    border: 1px solid rgba(16, 33, 54, 0.08);
    border-radius: var(--radius-md);
    background: rgba(244, 248, 253, 0.75);
}

.group-builder-utility-shell {
    grid-template-columns: minmax(0, 1.45fr) minmax(16rem, 0.95fr);
    align-items: start;
}

.group-builder-utility-card {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid rgba(16, 33, 54, 0.08);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.82);
}

.group-form-section {
    display: grid;
    gap: var(--space-3);
    grid-column: 1 / -1;
    padding: var(--space-4) var(--space-5);
    border: 1px solid rgba(16, 33, 54, 0.12);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(246, 250, 255, 0.98), rgba(255, 255, 255, 0.99));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.group-form-section-identity {
    background: linear-gradient(180deg, rgba(242, 248, 255, 0.98), rgba(255, 255, 255, 0.99));
}

.group-rule-summary-card {
    margin: 0;
    padding: var(--space-4);
}

.group-builder-actions {
    margin-top: 0;
    justify-content: flex-start;
}

.group-builder-statuses {
    align-self: start;
}

.group-form-section-heading {
    display: grid;
    gap: 0.2rem;
}

.group-form-section-heading .compact-copy,
.group-field-hint {
    margin: 0;
}

.group-rule-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.group-rule-grid > label,
.group-explorer-handoff > label {
    display: grid;
    gap: var(--space-1);
}

.group-kind-selector {
    display: grid;
    gap: var(--space-2);
}

.group-search-builder {
    display: grid;
    gap: var(--space-2);
    padding-top: var(--space-1);
}

.group-search-entry {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}

.group-search-entry .action-button {
    min-width: 7.5rem;
}

.group-search-chip-list {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.group-search-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: var(--app-hit-target);
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(8, 86, 163, 0.16);
    background: rgba(8, 86, 163, 0.08);
    color: #12314e;
    font-weight: 600;
    cursor: pointer;
}

.group-search-chip:hover {
    border-color: rgba(8, 86, 163, 0.26);
    background: rgba(8, 86, 163, 0.12);
}

.kind-chip-grid {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.kind-chip-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.kind-chip-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.kind-chip-toggle span {
    display: inline-flex;
    align-items: center;
    min-height: var(--app-hit-target);
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(16, 33, 54, 0.12);
    background: rgba(255, 255, 255, 0.88);
    color: #344054;
    font-weight: 600;
    transition:
        border-color var(--motion-duration-fast) var(--motion-ease-standard),
        background-color var(--motion-duration-fast) var(--motion-ease-standard),
        color var(--motion-duration-fast) var(--motion-ease-standard),
        box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}

.kind-chip-toggle input:checked + span {
    border-color: rgba(8, 86, 163, 0.28);
    background: linear-gradient(135deg, rgba(8, 86, 163, 0.1), rgba(11, 170, 159, 0.08));
    color: #12314e;
    box-shadow: inset 0 0 0 1px rgba(8, 86, 163, 0.1);
}

.group-directory-list {
    display: grid;
    gap: var(--space-3);
}

.saved-group-environment-summary {
    margin: 0;
}

.saved-group-directory-section,
.saved-group-service-group {
    display: grid;
    gap: var(--space-3);
}

.saved-group-directory-section + .saved-group-directory-section {
    padding-top: var(--space-4);
    border-top: 1px solid rgba(16, 33, 54, 0.08);
}

.saved-group-directory-section-heading,
.saved-group-service-heading {
    display: grid;
    gap: 0.2rem;
}

.saved-group-directory-section-heading .context-meta,
.saved-group-service-heading .context-meta {
    margin: 0;
}

.group-monitor-heading {
    padding-bottom: var(--space-4);
    border-bottom: 1px solid rgba(16, 33, 54, 0.12);
}

.group-panel-summary .group-monitor-heading {
    padding-bottom: 0;
    border-bottom: 0;
}

.group-monitor-actions .action-button {
    min-width: 0;
    padding-inline: 0.9rem;
    background: rgba(16, 33, 54, 0.05) !important;
    border-color: rgba(16, 33, 54, 0.1) !important;
    color: var(--app-text-support) !important;
    -webkit-text-fill-color: var(--app-text-support);
}

.group-monitor-actions {
    margin-bottom: 0;
    justify-content: flex-end;
}

.group-monitor-overview-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(12rem, 1fr));
    align-items: start;
}

.group-monitor-panel-wallboard .group-monitor-overview-grid {
    grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(12rem, 1fr));
}

.group-monitor-metadata-card .group-monitor-fact-grid {
    grid-template-columns: repeat(2, minmax(10rem, 1fr));
}

.group-monitor-metadata-card .group-monitor-fact-grid dd {
    overflow-wrap: break-word;
    word-break: normal;
}

.group-monitor-panel-wallboard .group-monitor-metadata-card {
    grid-column: span 2;
}

.group-monitor-panel-wallboard .group-monitor-metadata-card .group-monitor-fact-grid {
    grid-template-columns: repeat(2, minmax(12rem, 1fr));
}

.wallboard-alert-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.wallboard-status-banner {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-strong);
    border-left-width: 0.35rem;
    border-left-style: solid;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 255, 0.96));
    box-shadow: 0 16px 30px rgba(15, 23, 40, 0.08);
}

.wallboard-status-banner.success {
    border-color: var(--risk-low-border);
    background: linear-gradient(180deg, rgba(242, 253, 249, 0.99), rgba(255, 255, 255, 0.98));
}

.wallboard-status-banner.warning {
    border-color: var(--risk-medium-border);
    background: linear-gradient(180deg, rgba(255, 249, 239, 0.99), rgba(255, 255, 255, 0.98));
    border-left-style: dashed;
}

.wallboard-status-banner.danger {
    border-color: var(--risk-high-border);
    background: linear-gradient(180deg, rgba(255, 243, 242, 0.99), rgba(255, 255, 255, 0.98));
    border-left-width: 0.45rem;
    border-left-style: double;
}

.wallboard-status-copy,
.wallboard-status-meta {
    display: grid;
    gap: var(--space-1);
}

.wallboard-status-copy strong {
    color: #12314e;
    font-size: clamp(1.2rem, 2vw, 1.5rem);
}

.wallboard-status-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: fit-content;
    min-height: 1.85rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: var(--color-neutral-100);
    color: var(--app-text-support);
    font-size: var(--type-kicker);
    font-weight: 800;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.wallboard-status-eyebrow::before,
.wallboard-alert-eyebrow::before {
    display: inline-grid;
    place-items: center;
    width: 1rem;
    height: 1rem;
    border: 1.5px solid currentColor;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    flex: 0 0 auto;
}

.wallboard-status-banner.success .wallboard-status-eyebrow::before,
.wallboard-alert-card.success .wallboard-alert-eyebrow::before {
    content: "\2713";
}

.wallboard-status-banner.warning .wallboard-status-eyebrow::before,
.wallboard-alert-card.warning .wallboard-alert-eyebrow::before {
    content: "!";
}

.wallboard-status-banner.danger .wallboard-status-eyebrow::before,
.wallboard-alert-card.danger .wallboard-alert-eyebrow::before {
    content: "\00D7";
}

.wallboard-status-meta {
    justify-items: end;
    text-align: right;
}

.wallboard-status-summary {
    color: var(--color-neutral-900);
    font-weight: 700;
}

.wallboard-alert-card {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-strong);
    border-left-width: 0.35rem;
    border-left-style: solid;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 255, 0.96));
    box-shadow: 0 14px 28px rgba(15, 23, 40, 0.06);
}

.wallboard-alert-card.success {
    border-color: var(--risk-low-border);
    background: linear-gradient(180deg, rgba(242, 253, 249, 0.98), rgba(255, 255, 255, 0.98));
}

.wallboard-alert-card.warning {
    border-color: var(--risk-medium-border);
    background: linear-gradient(180deg, rgba(255, 249, 239, 0.98), rgba(255, 255, 255, 0.98));
    border-left-style: dashed;
}

.wallboard-alert-card.danger {
    border-color: var(--risk-high-border);
    background: linear-gradient(180deg, rgba(255, 243, 242, 0.98), rgba(255, 255, 255, 0.98));
    border-left-width: 0.45rem;
    border-left-style: double;
}

.wallboard-alert-card strong {
    color: var(--color-neutral-900);
    font-size: 1.02rem;
}

.wallboard-alert-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: fit-content;
    min-height: 1.85rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: rgba(16, 33, 54, 0.08);
    color: var(--app-text-support);
    font-size: var(--type-kicker);
    font-weight: 800;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.group-monitor-card,
.group-monitor-section-card {
    padding: var(--space-3);
    border: 1px solid rgba(16, 33, 54, 0.1);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(252, 253, 255, 1), rgba(246, 250, 255, 0.98));
    box-shadow: 0 10px 24px rgba(15, 23, 40, 0.05);
}

.live-surface-panel,
.inspector-fold-body > .detail-section.live-surface-card {
    border-color: rgba(8, 86, 163, 0.16);
    background: linear-gradient(180deg, rgba(242, 248, 255, 0.99), rgba(255, 255, 255, 0.97));
    box-shadow: 0 16px 32px rgba(8, 86, 163, 0.08);
}

.live-surface-heading {
    align-items: start;
}

.live-surface-heading > div {
    display: grid;
    gap: 0.15rem;
}

.live-surface-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 1.55rem;
    margin: 0;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    background: rgba(8, 86, 163, 0.1);
    color: #0b4ea2;
    font-size: var(--type-kicker);
    font-weight: 800;
    letter-spacing: var(--tracking-kicker);
    text-transform: uppercase;
}

.group-monitor-panel-wallboard .group-monitor-card,
.group-monitor-panel-wallboard .group-monitor-section-card,
.group-monitor-panel-wallboard .group-log-panel {
    padding: var(--space-4);
    box-shadow: 0 16px 30px rgba(15, 23, 40, 0.06);
}

.group-monitor-panel-wallboard .group-metrics-header {
    gap: var(--space-4);
}

.group-monitor-panel-wallboard .group-monitor-card-strong {
    padding: var(--space-4);
}

.group-monitor-panel-wallboard .group-monitor-card-strong .group-monitor-fact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.group-monitor-panel-wallboard .group-monitor-fact-grid dd {
    font-size: clamp(1.45rem, 2vw, 1.9rem);
    line-height: 1.05;
}

.group-monitor-panel-wallboard .group-monitor-fact-grid dt {
    font-size: 0.76rem;
    letter-spacing: 0.07em;
}

.group-log-panel-wallboard {
    position: sticky;
    top: calc(var(--space-6) + 0.25rem);
    align-self: start;
}

.group-log-panel-wallboard .log-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
}

.group-log-panel-wallboard .log-actions {
    grid-column: 1 / -1;
}

.group-log-panel-wallboard .log-output {
    min-height: 22rem;
    max-height: 44rem;
}

.group-monitor-card-strong {
    background: linear-gradient(180deg, rgba(241, 247, 255, 1), rgba(255, 255, 255, 0.99));
    border-color: rgba(8, 86, 163, 0.14);
}

.group-monitor-card-heading {
    display: grid;
    gap: 0.2rem;
    margin-bottom: var(--space-3);
}

.group-monitor-card-heading h4 {
    margin: 0;
}

.group-monitor-fact-grid {
    gap: var(--space-3);
}

.group-monitor-fact-grid div {
    background: rgba(255, 255, 255, 0.94);
}

.group-monitor-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
}

.group-monitor-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(16, 33, 54, 0.08);
    color: #344054;
}

.group-monitor-list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.group-monitor-list li:first-child {
    padding-top: 0;
}

.group-monitor-list strong {
    color: #18324d;
}

.draft-sticky-indicator {
    position: fixed;
    right: clamp(1rem, 2vw, 1.75rem);
    bottom: clamp(1rem, 2vw, 1.5rem);
    max-width: min(34rem, calc(100vw - 2rem));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 0.75rem 0.9rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(8, 86, 163, 0.18);
    background: rgba(18, 49, 78, 0.94);
    color: #f8fbff;
    font-weight: 700;
    box-shadow: 0 20px 40px rgba(15, 23, 40, 0.18);
    z-index: 40;
}

.draft-sticky-copy {
    color: inherit;
    flex: 1 1 auto;
    min-width: 0;
}

.draft-sticky-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
    flex: 0 0 auto;
    flex-wrap: nowrap;
}

.draft-sticky-actions .action-button {
    min-height: var(--app-hit-target);
    padding: 0.45rem 0.8rem;
    min-width: auto;
}

.draft-sticky-actions .action-button.tertiary {
    --button-fg: #f8fbff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
}

.metrics-fact-grid {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.impact-preview-toolbar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, max-content));
    gap: var(--space-3);
    align-items: end;
    margin-bottom: var(--space-3);
}

.impact-target-input {
    width: 100%;
}

.impact-confirmation-input {
    width: min(100%, 22rem);
    margin-top: var(--space-2);
}

.action-execution-section {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-soft);
}

.action-execution-actions {
    align-items: flex-start;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.action-execution-actions .compact-copy {
    margin: 0;
    max-width: 42rem;
}

.metrics-summary-block {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    border: 1px solid rgba(16, 33, 54, 0.1);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(241, 247, 255, 0.94), rgba(255, 255, 255, 0.99));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.metrics-section-heading {
    display: grid;
    gap: var(--space-1);
}

.metrics-section-heading h5 {
    margin: 0;
    font-size: 0.94rem;
    color: #18324d;
}

.metrics-section-heading-spaced {
    margin-top: var(--space-5);
    margin-bottom: var(--space-3);
}

.metrics-trend-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    margin-bottom: var(--space-4);
}

.metrics-trend-grid-compact {
    margin-top: var(--space-3);
}

.metrics-trend-card {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid rgba(16, 33, 54, 0.1);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 255, 0.92));
}

.group-metrics-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-4);
    align-items: start;
    margin-bottom: var(--space-4);
    padding: 0 0 var(--space-4);
    border-bottom: 1px solid rgba(16, 33, 54, 0.12);
}

.group-metrics-title {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.group-metrics-title h4,
.group-metrics-title .compact-copy {
    margin: 0;
}

.group-metrics-toolbar {
    display: grid;
    gap: var(--space-2);
    justify-items: end;
    min-width: 0;
}

.metrics-trend-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.metrics-trend-bars {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: end;
    gap: 0.3rem;
    min-height: 4.5rem;
}

.metrics-trend-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    color: var(--app-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    flex-wrap: wrap;
}

.metrics-detail-fold {
    margin-top: var(--space-4);
}

.metrics-detail-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    cursor: pointer;
    list-style: none;
}

.metrics-detail-summary::-webkit-details-marker {
    display: none;
}

.metrics-detail-summary + * {
    margin-top: var(--space-4);
}

.metrics-trend-bar {
    display: flex;
    align-items: end;
    min-width: 0;
    min-height: 4.5rem;
}

.metrics-trend-bar-fill {
    width: 100%;
    min-height: 0.28rem;
    border-radius: 999px;
}

.metrics-bar-list {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.group-usage-bar-list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-2);
}

.group-usage-bar-card {
    min-width: 0;
    gap: var(--space-2);
    padding: var(--space-2);
}

.group-usage-bar-card .metrics-bar-header {
    display: grid;
    gap: var(--space-2);
}

.group-usage-bar-card .metrics-bar-header > div {
    min-width: 0;
}

.group-usage-bar-card .metrics-bar-header strong,
.group-usage-bar-card .metrics-bar-header p {
    overflow-wrap: anywhere;
}

.group-usage-bar-card .status-chip {
    justify-self: start;
}

.group-usage-bar-card .metrics-bar-row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
}

.group-usage-bar-card .metrics-bar-row > strong {
    font-size: 0.86rem;
}

.metrics-bar-card {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid rgba(16, 33, 54, 0.08);
    background: rgba(255, 255, 255, 0.9);
}

.metrics-bar-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--space-3);
}

.metrics-bar-row {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
}

.metrics-bar-row > span:first-child {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--app-text-muted);
}

.metrics-bar-track {
    position: relative;
    min-width: 0;
    height: 0.65rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(16, 33, 54, 0.08);
}

.metrics-bar-fill {
    height: 100%;
    border-radius: inherit;
}

.cpu-bar {
    background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-300));
}

.memory-bar {
    background: linear-gradient(135deg, var(--color-teal-500), var(--color-teal-300));
}

.restart-bar {
    background: linear-gradient(135deg, var(--color-amber-600), var(--color-amber-300));
}

.action-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 4vh 4vw;
    background: rgba(15, 23, 40, 0.42);
    backdrop-filter: blur(10px);
}

.action-modal-shell {
    width: min(var(--layout-command-palette-max), 100%);
    max-height: 92vh;
    overflow: auto;
    display: grid;
    gap: var(--space-4);
    padding: clamp(1.25rem, 2vw, 1.75rem);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-strong);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--elevation-overlay);
}

.action-modal-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--space-4);
}

.action-modal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.action-modal-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

@media (max-width: 1700px) {
    .group-usage-bar-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .wallboard-monitor-grid {
        grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 0.8fr);
    }
}

@media (max-width: 1320px) {
    .group-usage-bar-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .wallboard-monitor-grid {
        grid-template-columns: 1fr;
    }

    .group-log-panel-wallboard {
        position: static;
    }

    .wallboard-status-banner {
        grid-template-columns: 1fr;
    }

    .wallboard-status-meta {
        justify-items: start;
        text-align: left;
    }

    .action-modal-backdrop {
        padding: 0;
    }

    .action-modal-shell {
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0;
    }
}

.warning-callout {
    border-color: rgba(176, 116, 27, 0.18);
    background: rgba(176, 116, 27, 0.08);
}

.session-loss-shell {
    margin-top: calc(var(--space-6) * -0.15);
}

.session-loss-callout {
    border-left: 0.45rem solid rgba(176, 116, 27, 0.48);
}

.workspace-tools-panel {
    min-width: min(100%, 18rem);
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(16, 33, 54, 0.08);
    border-radius: var(--radius-md);
    background: rgba(248, 251, 255, 0.82);
}

.workspace-tools-panel summary {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 2.75rem;
    box-sizing: border-box;
    margin: 0;
    padding: 0.85rem 1rem 0.85rem 2.35rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    cursor: pointer;
    font-weight: 600;
    line-height: 1.2;
    color: #12314e;
    list-style: none;
}

.workspace-tools-panel[open] summary {
    border-bottom: 1px solid rgba(16, 33, 54, 0.08);
    background: rgba(255, 255, 255, 0.55);
}

.workspace-tools-panel summary::marker {
    content: "";
}

.workspace-tools-panel summary::-webkit-details-marker {
    display: none;
}

.workspace-tools-panel summary::before {
    content: "\25B8";
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.82rem;
    color: var(--app-text-muted);
    transition:
        transform var(--motion-duration-fast) var(--motion-ease-standard),
        color var(--motion-duration-fast) var(--motion-ease-standard);
}

.workspace-tools-panel[open] > summary::before {
    transform: translateY(-50%) rotate(90deg);
    color: #12314e;
}

.workspace-tools-panel > :not(summary) {
    padding-inline: 1rem;
}

.workspace-tools-panel > :last-child {
    padding-bottom: 1rem;
}

.workspace-tools-panel .compact-copy {
    margin-bottom: var(--space-3);
}

.workspace-tools-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.workspace-tools-actions .action-button {
    min-width: 9rem;
}

.storage-tools-panel {
    margin-top: var(--space-4);
}

.storage-page-fold {
    padding: 0;
    overflow: hidden;
}

.storage-tools-panel-static {
    padding: 1rem;
}

.workspace-tools-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    font-weight: 600;
    color: inherit;
}

.search-profile-panel {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--app-surface-border);
    border-radius: var(--radius-lg);
    background: var(--app-surface-bg);
    box-shadow: 0 10px 24px rgba(15, 23, 40, 0.04);
}

.settings-advanced-fold {
    margin-top: var(--space-4);
    border: 1px solid var(--app-surface-border);
    border-radius: var(--radius-lg);
    background: var(--app-surface-bg);
    box-shadow: 0 10px 24px rgba(15, 23, 40, 0.04);
}

.settings-advanced-fold > summary {
    cursor: pointer;
    list-style: none;
    padding: var(--space-3) var(--space-4);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--app-text-muted);
}

.settings-advanced-fold > summary::marker {
    display: none;
}

.settings-advanced-fold > summary::-webkit-details-marker {
    display: none;
}

.settings-advanced-fold > :not(summary) {
    padding: 0 var(--space-4) var(--space-4);
}

.compact-heading h4 {
    margin: 0;
}

.search-profile-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

.settings-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.settings-section {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--app-surface-border);
    border-radius: var(--radius-md);
    background: var(--app-surface-muted);
}

.settings-section h5 {
    margin: 0;
}

.settings-toggle-group {
    width: fit-content;
}

.search-profile-section {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--app-surface-border);
    border-radius: var(--radius-md);
    background: var(--app-surface-muted);
}

.search-profile-section h5 {
    margin: 0;
}

.search-profile-section-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--space-3);
}

.search-profile-list {
    display: grid;
    gap: var(--space-2);
}

.search-profile-item {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--app-surface-border);
    border-radius: var(--radius-md);
    background: var(--app-surface-muted-strong);
}

.search-profile-item-copy {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}

.search-profile-item-copy strong,
.search-profile-item-copy span,
.search-profile-item-copy li {
    overflow-wrap: anywhere;
}

.search-profile-editor {
    display: grid;
    gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--app-surface-border);
}

.compact-pill-list {
    gap: var(--space-2);
}

.compact-pill-list li {
    padding: 0.2rem 0.55rem;
    font-size: 0.82rem;
}

.compact-button {
    min-height: var(--app-hit-target);
    padding: 0.45rem 0.8rem;
}

.first-workspace-helper {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(21, 94, 239, 0.18);
    background:
        linear-gradient(180deg, rgba(21, 94, 239, 0.06), rgba(255, 255, 255, 0.96)),
        rgba(255, 255, 255, 0.96);
}

.first-workspace-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.first-workspace-card {
    width: 100%;
    display: grid;
    gap: var(--space-2);
    text-align: left;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid rgba(8, 86, 163, 0.16);
    background: rgba(255, 255, 255, 0.94);
    color: #0f1728 !important;
    -webkit-text-fill-color: #0f1728;
    forced-color-adjust: none;
    cursor: pointer;
    transition:
        border-color var(--motion-duration-fast) var(--motion-ease-standard),
        box-shadow var(--motion-duration-fast) var(--motion-ease-standard),
        transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.first-workspace-card,
.first-workspace-card * {
    color: #0f1728 !important;
    -webkit-text-fill-color: #0f1728;
}

.first-workspace-card:hover:enabled {
    transform: translateY(var(--motion-lift-hover));
    border-color: rgba(8, 86, 163, 0.28);
    box-shadow: var(--shadow-soft);
}

.first-workspace-card:disabled {
    cursor: wait;
    opacity: 0.72;
}

.first-run-tour-shell {
    margin-top: calc(var(--space-6) * -0.2);
}

.first-run-tour-panel {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid rgba(21, 94, 239, 0.18);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, rgba(21, 94, 239, 0.07), rgba(255, 255, 255, 0.98)),
        rgba(255, 255, 255, 0.98);
    box-shadow: var(--shadow-soft);
}

.first-run-tour-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--space-4);
}

.first-run-tour-header h3,
.first-run-tour-summary {
    margin: 0;
}

.first-run-tour-focus-list {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.first-run-tour-focus-item {
    padding: var(--space-4);
    border: 1px solid rgba(16, 33, 54, 0.08);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.84);
    color: var(--app-text-strong);
    font-weight: 600;
}

.scope-switch-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
    gap: var(--space-4);
    align-items: end;
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    border: 1px solid rgba(16, 33, 54, 0.08);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.78);
}

.scope-switch-copy {
    display: grid;
    gap: var(--space-2);
}

.scope-switch-copy strong,
.scope-switch-copy p {
    margin: 0;
}

.scope-switch-field {
    display: grid;
    gap: var(--space-2);
}

.filter-actions {
    display: flex;
    grid-column: 1 / -1;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    min-height: auto;
}

.heading-statuses {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.live-refresh-controls {
    display: flex;
    align-items: end;
    gap: var(--space-3);
    flex-wrap: wrap;
    min-width: min(100%, var(--layout-status-banner-max));
}

.live-refresh-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: var(--app-hit-target);
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #12314e;
    font-weight: 600;
}

.live-refresh-toggle input {
    margin: 0;
}

.live-refresh-interval {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-width: auto;
    padding: 0.15rem 0 0.15rem 0.2rem;
}

.live-refresh-select {
    min-width: 5.4rem;
}

.live-refresh-inline-label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--app-text-muted);
}

.live-refresh-controls .compact-copy {
    align-self: center;
    max-width: 22rem;
}

.filter-actions .action-button {
    min-width: 12rem;
    margin-left: auto;
}

.transparency-panel {
    margin-bottom: var(--space-4);
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(16, 33, 54, 0.08);
    border-radius: var(--radius-md);
    background: rgba(252, 253, 255, 0.76);
}

.transparency-panel summary {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 2.75rem;
    box-sizing: border-box;
    margin: 0;
    padding: 0.95rem var(--space-4) 0.95rem calc(var(--space-4) + 1.35rem);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    cursor: pointer;
    font-weight: 700;
    line-height: 1.2;
    color: #12314e;
    list-style: none;
}

.transparency-panel[open] summary {
    border-bottom: 1px solid rgba(16, 33, 54, 0.08);
    background: rgba(255, 255, 255, 0.45);
}

.transparency-panel summary::marker {
    content: "";
}

.transparency-panel summary::-webkit-details-marker {
    display: none;
}

.transparency-panel summary::before {
    content: "\25B8";
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.82rem;
    color: var(--app-text-muted);
    transition:
        transform var(--motion-duration-fast) var(--motion-ease-standard),
        color var(--motion-duration-fast) var(--motion-ease-standard);
}

.transparency-panel[open] > summary::before {
    transform: translateY(-50%) rotate(90deg);
    color: #12314e;
}

.transparency-panel > :not(summary) {
    padding-inline: var(--space-4);
}

.transparency-panel > :last-child {
    padding-bottom: var(--space-4);
}

.transparency-copy {
    margin: 0 0 var(--space-3);
}

.inline-explanation-panel {
    margin: 0 0 var(--space-4);
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(16, 33, 54, 0.08);
    border-radius: var(--radius-md);
    background: rgba(250, 252, 255, 0.86);
}

.inline-explanation-panel summary {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 2.6rem;
    box-sizing: border-box;
    margin: 0;
    padding: 0.85rem var(--space-4) 0.85rem calc(var(--space-4) + 1.35rem);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    cursor: pointer;
    font-weight: 700;
    line-height: 1.2;
    color: #12314e;
    list-style: none;
}

.inline-explanation-panel summary::marker {
    content: "";
}

.inline-explanation-panel summary::-webkit-details-marker {
    display: none;
}

.inline-explanation-panel summary::before {
    content: "\25B8";
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.82rem;
    color: var(--app-text-muted);
    transition:
        transform var(--motion-duration-fast) var(--motion-ease-standard),
        color var(--motion-duration-fast) var(--motion-ease-standard);
}

.inline-explanation-panel[open] > summary::before {
    transform: translateY(-50%) rotate(90deg);
    color: #12314e;
}

.inline-explanation-panel[open] summary {
    border-bottom: 1px solid rgba(16, 33, 54, 0.08);
    background: rgba(255, 255, 255, 0.45);
}

.inline-explanation-body {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
}

.inline-explanation-title,
.inline-explanation-body p {
    margin: 0;
}

.inline-explanation-sections {
    display: grid;
    gap: var(--space-3);
}

.inline-explanation-card {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid rgba(16, 33, 54, 0.08);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.95));
}

.inline-explanation-outcome strong {
    color: var(--app-text-strong);
}

.app-shell[data-ui-theme="dark"] .inline-explanation-panel summary {
    color: var(--app-text-strong);
}

.app-shell[data-ui-theme="dark"] .inline-explanation-panel[open] summary {
    border-color: rgba(148, 163, 184, 0.14);
    background: rgba(148, 163, 184, 0.08);
}

.app-shell[data-ui-theme="dark"] .inline-explanation-card {
    border-color: rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(19, 33, 53, 0.98), rgba(15, 23, 42, 0.96));
}

.transparency-command-list {
    display: grid;
    gap: var(--space-3);
}

.transparency-command {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid rgba(16, 33, 54, 0.08);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(251, 253, 255, 0.99), rgba(244, 249, 255, 0.96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.transparency-command-header {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    align-items: center;
}

.transparency-command-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.copy-command-button {
    width: fit-content;
    min-width: 5.5rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.78rem;
}

.command-code {
    margin: 0;
    white-space: pre-wrap;
    font-size: 0.82rem;
    line-height: 1.6;
}

.explorer-panel {
    grid-column: 1 / -1;
}

.work-canvas-shell {
    display: grid;
    gap: var(--space-4);
}

.work-canvas-grid {
    display: grid;
    gap: var(--space-4);
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
}

.work-canvas-grid.has-bottom-rail {
    grid-template-areas:
        "main"
        "inspector"
        "bottom";
}

.work-canvas-grid:not(.has-bottom-rail) {
    grid-template-areas:
        "main"
        "inspector";
}

.work-canvas-main {
    grid-area: main;
    min-width: 0;
    display: grid;
    gap: var(--space-4);
}

.work-canvas-inspector {
    grid-area: inspector;
    min-width: 0;
    display: grid;
    gap: var(--space-4);
    align-self: start;
    position: static;
}

.work-canvas-bottom-rail {
    grid-area: bottom;
    min-width: 0;
    display: grid;
    gap: var(--space-4);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

.work-canvas-rail-panel {
    display: grid;
    gap: var(--space-3);
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(16, 33, 54, 0.1);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(246, 250, 255, 0.99), rgba(255, 255, 255, 0.98));
    box-shadow: var(--elevation-card);
}

.work-canvas-rail-panel summary {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 3rem;
    box-sizing: border-box;
    margin: 0;
    padding: 1rem var(--space-4) 1rem calc(var(--space-4) + 1.35rem);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    cursor: pointer;
    list-style: none;
}

.work-canvas-rail-panel summary::marker {
    content: "";
}

.work-canvas-rail-panel summary::-webkit-details-marker {
    display: none;
}

.work-canvas-rail-panel summary::before {
    content: "\25B8";
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.82rem;
    color: var(--app-text-muted);
    transition:
        transform var(--motion-duration-fast) var(--motion-ease-standard),
        color var(--motion-duration-fast) var(--motion-ease-standard);
}

.work-canvas-rail-panel[open] > summary::before {
    transform: translateY(-50%) rotate(90deg);
    color: #12314e;
}

.work-canvas-rail-panel[open] summary {
    border-bottom: 1px solid rgba(16, 33, 54, 0.08);
    background: rgba(255, 255, 255, 0.45);
}

.work-canvas-rail-summary {
    margin-left: auto;
    color: var(--app-text-muted);
    font-size: 0.84rem;
    font-weight: 500;
    text-align: right;
}

.work-canvas-rail-body {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-4);
}

.explorer-surface {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
}

.explorer-surface > * {
    min-width: 0;
}

.table-shell {
    display: grid;
    gap: var(--space-3);
    overflow-x: auto;
    border: 1px solid var(--border-brand);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 251, 255, 0.96));
    box-shadow: var(--elevation-card);
}

.grouped-explorer-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4) 0;
}

.grouped-explorer-summary .compact-copy {
    margin: 0;
}

.resource-pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: 0 var(--space-4);
}

.resource-pagination-bar .compact-copy {
    margin: 0;
}

.incident-selection-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin: var(--space-3) var(--space-4) 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-soft);
    border-radius: 1rem;
    background: rgba(10, 39, 74, 0.045);
}

.incident-selection-bar h5,
.incident-selection-bar .compact-copy,
.incident-selection-bar .section-kicker {
    margin: 0;
}

.selection-column,
.selection-cell {
    width: 3.25rem;
    text-align: center;
}

.row-selection-checkbox {
    width: 1rem;
    height: 1rem;
    margin: 0;
}

.resource-pagination-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.resource-table tbody tr.resource-row {
    cursor: pointer;
    transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.resource-table tbody tr.resource-row:hover {
    background: rgba(8, 86, 163, 0.04);
}

.resource-table tbody tr.resource-row:focus-within,
.resource-table tbody tr.resource-row:focus {
    outline: 2px solid var(--app-focus-ring);
    outline-offset: -2px;
    box-shadow: inset 0 0 0 3px var(--app-focus-shadow);
}

.resource-table tbody tr.selected {
    background: rgba(8, 86, 163, 0.06);
}

.resource-table tbody tr.resource-group-row td {
    padding: 0.8rem 1rem;
    border-bottom-color: rgba(16, 33, 54, 0.06);
}

.resource-table tbody tr.context-group-row td {
    background: rgba(10, 39, 74, 0.06);
}

.resource-table tbody tr.namespace-group-row td {
    background: rgba(21, 94, 239, 0.04);
}

.resource-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--type-body-compact);
}

.resource-table-scroll-region {
    max-height: min(60vh, 42rem);
    overflow-y: auto;
    border-radius: var(--radius-lg);
}

.resource-table-virtualized thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.resource-table th,
.resource-table td {
    padding: 0.9rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-soft);
    vertical-align: top;
}

.resource-table th {
    font-size: var(--type-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--app-text-muted);
    background: var(--surface-foundation-muted);
    background-clip: padding-box;
    box-shadow: inset 0 -1px 0 var(--border-soft);
}

.resource-table th.selection-column,
.resource-table td.selection-cell {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    vertical-align: middle;
}

.message-list,
.context-list,
.warning-list {
    margin: 0;
    padding-left: 1.25rem;
}

.diagnostic-issue-list {
    display: grid;
    gap: var(--space-3);
}

.diagnostic-issue-card {
    padding: var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-surface-elevated);
    box-shadow: var(--shadow-xs);
}

.diagnostic-issue-card h5 {
    margin: 0 0 var(--space-1);
}

.diagnostic-issue-card p {
    margin: 0;
}

.diagnostic-issue-card .pill-list {
    margin-top: var(--space-2);
}

.sort-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    min-height: var(--app-hit-target);
    padding: 0.35rem 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.sort-button:hover {
    color: #12314e;
}

.sort-button:focus-visible {
    outline: 2px solid var(--app-focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 4px var(--app-focus-shadow);
}

.sort-indicator {
    flex-shrink: 0;
    font-size: 0.85rem;
    color: var(--app-text-muted);
}

.resource-group-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.group-label {
    display: block;
    margin-bottom: 0.2rem;
    font-size: var(--type-kicker);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--app-text-muted);
}

.resource-table tbody tr:last-child td {
    border-bottom: 0;
}

.inspector-panel {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid rgba(16, 33, 54, 0.12);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(255, 255, 255, 0.98));
    box-shadow: 0 22px 40px rgba(15, 23, 40, 0.08);
    min-width: 0;
    container-type: inline-size;
}

.explorer-inspector-panel {
    margin-top: 0;
}

.inspector-panel > * {
    min-width: 0;
}

.inspector-fold-panel {
    display: grid;
    gap: var(--space-3);
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(16, 33, 54, 0.1);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(249, 252, 255, 0.94), rgba(255, 255, 255, 0.9));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.inspector-fold-panel summary {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 2.75rem;
    box-sizing: border-box;
    margin: 0;
    padding: 0.95rem var(--space-4) 0.95rem calc(var(--space-4) + 1.35rem);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    cursor: pointer;
    font-weight: 700;
    line-height: 1.2;
    color: #12314e;
    list-style: none;
}

.inspector-fold-panel[open] summary {
    border-bottom: 1px solid rgba(16, 33, 54, 0.08);
    background: rgba(255, 255, 255, 0.4);
}

.inspector-fold-panel summary::marker {
    content: "";
}

.inspector-fold-panel summary::-webkit-details-marker {
    display: none;
}

.inspector-fold-panel summary::before {
    content: "\25B8";
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.82rem;
    color: var(--app-text-muted);
    transition:
        transform var(--motion-duration-fast) var(--motion-ease-standard),
        color var(--motion-duration-fast) var(--motion-ease-standard);
}

.inspector-fold-panel[open] > summary::before {
    transform: translateY(-50%) rotate(90deg);
    color: #12314e;
}

.inspector-fold-summary {
    margin-left: auto;
    color: var(--app-text-muted);
    font-size: 0.84rem;
    font-weight: 500;
    text-align: right;
}

.inspector-fold-body {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
}

.compact-heading {
    margin-bottom: 0;
}

.inspector-header-copy {
    display: grid;
    gap: 0.2rem;
}

.detail-summary {
    display: grid;
    gap: var(--space-2);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-soft);
}

.inspector-resource-card {
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid rgba(16, 33, 54, 0.1);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 247, 255, 0.96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.inspector-resource-headline {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--space-3);
}

.inspector-resource-headline > div {
    min-width: 0;
}

.inspector-resource-headline h3 {
    margin: 0;
    color: #0f2943;
    font-size: var(--type-section-title);
}

.inspector-resource-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.identity-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.58rem;
    border-radius: 999px;
    border: 1px solid rgba(16, 33, 54, 0.12);
    background: rgba(16, 33, 54, 0.05);
    color: var(--app-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.inspector-resource-summary {
    line-height: 1.5;
}

.detail-summary p,
.compact-copy,
.related-meta {
    margin: 0;
    font-size: var(--type-body-compact);
}

.detail-section {
    display: grid;
    gap: var(--space-2);
}

.inspector-fold-body > .detail-section {
    padding: var(--space-3);
    border: 1px solid rgba(16, 33, 54, 0.08);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.95));
}

.detail-section h4 {
    margin: 0;
    color: #18324d;
}

.raw-manifest-panel {
    display: grid;
    gap: var(--space-3);
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(16, 33, 54, 0.08);
    border-radius: var(--radius-md);
    background: rgba(248, 251, 255, 0.82);
}

.raw-manifest-panel summary {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 2.75rem;
    box-sizing: border-box;
    margin: 0;
    padding: 0.95rem var(--space-4) 0.95rem calc(var(--space-4) + 1.35rem);
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    line-height: 1.2;
    color: #12314e;
    list-style: none;
}

.raw-manifest-panel[open] summary {
    border-bottom: 1px solid rgba(16, 33, 54, 0.08);
    background: rgba(255, 255, 255, 0.4);
}

.raw-manifest-panel summary::marker {
    content: "";
}

.raw-manifest-panel summary::-webkit-details-marker {
    display: none;
}

.raw-manifest-panel summary::before {
    content: "\25B8";
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.82rem;
    color: var(--app-text-muted);
    transition:
        transform var(--motion-duration-fast) var(--motion-ease-standard),
        color var(--motion-duration-fast) var(--motion-ease-standard);
}

.raw-manifest-panel[open] > summary::before {
    transform: translateY(-50%) rotate(90deg);
    color: #12314e;
}

.raw-manifest-panel > :not(summary) {
    padding-inline: var(--space-4);
}

.raw-manifest-panel > :last-child {
    padding-bottom: var(--space-4);
}

.dependency-graph-panel {
    display: grid;
    gap: var(--space-3);
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(16, 33, 54, 0.08);
    border-radius: var(--radius-md);
    background: rgba(248, 251, 255, 0.82);
}

.dependency-graph-panel summary {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 2.75rem;
    box-sizing: border-box;
    margin: 0;
    padding: 0.95rem var(--space-4) 0.95rem calc(var(--space-4) + 1.35rem);
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    line-height: 1.2;
    color: #12314e;
    list-style: none;
}

.dependency-graph-panel[open] summary {
    border-bottom: 1px solid rgba(16, 33, 54, 0.08);
    background: rgba(255, 255, 255, 0.4);
}

.dependency-graph-panel summary::marker {
    content: "";
}

.dependency-graph-panel summary::-webkit-details-marker {
    display: none;
}

.dependency-graph-panel summary::before {
    content: "\25B8";
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.82rem;
    color: var(--app-text-muted);
    transition:
        transform var(--motion-duration-fast) var(--motion-ease-standard),
        color var(--motion-duration-fast) var(--motion-ease-standard);
}

.dependency-graph-panel[open] > summary::before {
    transform: translateY(-50%) rotate(90deg);
    color: #12314e;
}

.dependency-graph-panel > :not(summary) {
    padding-inline: var(--space-4);
}

.dependency-graph-panel > :last-child {
    padding-bottom: var(--space-4);
}

.timeline-panel {
    display: grid;
    gap: var(--space-3);
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(16, 33, 54, 0.08);
    border-radius: var(--radius-md);
    background: rgba(248, 251, 255, 0.82);
}

.timeline-panel summary {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 2.75rem;
    box-sizing: border-box;
    margin: 0;
    padding: 0.95rem var(--space-4) 0.95rem calc(var(--space-4) + 1.35rem);
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    line-height: 1.2;
    color: #12314e;
    list-style: none;
}

.timeline-panel[open] summary {
    border-bottom: 1px solid rgba(16, 33, 54, 0.08);
    background: rgba(255, 255, 255, 0.4);
}

.timeline-panel summary::marker {
    content: "";
}

.timeline-panel summary::-webkit-details-marker {
    display: none;
}

.timeline-panel summary::before {
    content: "\25B8";
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.82rem;
    color: var(--app-text-muted);
    transition:
        transform var(--motion-duration-fast) var(--motion-ease-standard),
        color var(--motion-duration-fast) var(--motion-ease-standard);
}

.timeline-panel[open] > summary::before {
    transform: translateY(-50%) rotate(90deg);
    color: #12314e;
}

.timeline-panel > :not(summary) {
    padding-inline: var(--space-4);
}

.timeline-panel > :last-child {
    padding-bottom: var(--space-4);
}

.timeline-content-panel {
    display: grid;
    gap: var(--space-3);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.raw-manifest-output {
    margin: 0;
    min-height: 12rem;
    max-height: 28rem;
    overflow: auto;
    padding: var(--space-4);
    border: 1px solid rgba(16, 33, 54, 0.08);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, #122033, #0f1728);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color: #dfe6f2;
    font-family: var(--font-mono);
    font-size: 0.83rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.log-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 0.8fr);
    gap: var(--space-3);
    align-items: end;
}

.log-workbench {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid rgba(16, 33, 54, 0.08);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(252, 254, 255, 0.98), rgba(244, 249, 255, 0.95));
}

.live-surface-panel .log-workbench,
.live-surface-card .log-workbench {
    border-color: rgba(8, 86, 163, 0.12);
    background: linear-gradient(180deg, rgba(250, 253, 255, 0.99), rgba(239, 247, 255, 0.96));
}

.log-toolbar-support {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid rgba(16, 33, 54, 0.08);
}

.detail-subsection {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--app-surface-workbench-border);
    border-radius: var(--radius-md);
    background: var(--app-surface-workbench-bg);
    box-shadow: var(--app-surface-workbench-shadow);
}

.detail-subsection > h5 {
    margin: 0;
    color: var(--app-text-strong);
}

.log-toolbar > *,
.log-preset-bar > *,
.log-filter-row > *,
.detail-section > *,
.log-filter-shell > * {
    min-width: 0;
}

.log-actions {
    display: flex;
    justify-content: flex-end;
}

.live-surface-quick-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
}

.log-controls-panel {
    display: grid;
    gap: var(--space-3);
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(16, 33, 54, 0.08);
    border-radius: var(--radius-md);
    background: rgba(248, 251, 255, 0.82);
}

.log-controls-panel summary {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 2.75rem;
    box-sizing: border-box;
    margin: 0;
    padding: 0.95rem var(--space-4) 0.95rem calc(var(--space-4) + 1.35rem);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    cursor: pointer;
    font-weight: 600;
    line-height: 1.2;
    color: #12314e;
    list-style: none;
}

.log-controls-panel[open] summary {
    border-bottom: 1px solid rgba(16, 33, 54, 0.08);
    background: rgba(255, 255, 255, 0.4);
}

.log-controls-panel summary::marker {
    content: "";
}

.log-controls-panel summary::-webkit-details-marker {
    display: none;
}

.log-controls-panel summary::before {
    content: "\25B8";
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.82rem;
    color: var(--app-text-muted);
    transition:
        transform var(--motion-duration-fast) var(--motion-ease-standard),
        color var(--motion-duration-fast) var(--motion-ease-standard);
}

.log-controls-panel[open] > summary::before {
    transform: translateY(-50%) rotate(90deg);
    color: #12314e;
}

.log-controls-summary {
    margin-left: auto;
    color: var(--app-text-muted);
    font-size: 0.84rem;
    font-weight: 500;
    text-align: right;
}

.log-filter-shell {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
}

.log-preset-bar {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(14rem, 1.2fr) auto;
    gap: var(--space-3);
    align-items: end;
}

.log-filter-list {
    display: grid;
    gap: var(--space-3);
}

.log-filter-row {
    display: grid;
    grid-template-columns: minmax(8rem, 0.8fr) minmax(9rem, 0.9fr) minmax(0, 1.4fr) auto;
    gap: var(--space-3);
    align-items: end;
}

.log-filter-row-actions {
    display: flex;
    justify-content: flex-end;
}

.log-filter-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.log-output-shell {
    display: grid;
    gap: var(--space-3);
    max-height: 40rem;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding: var(--space-4);
    border: 1px solid rgba(16, 33, 54, 0.08);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(252, 254, 255, 0.98), rgba(247, 250, 255, 0.95));
}

.live-surface-panel .log-output-shell,
.live-surface-card .log-output-shell {
    border-color: rgba(8, 86, 163, 0.14);
    background: linear-gradient(180deg, rgba(248, 252, 255, 0.99), rgba(241, 247, 255, 0.97));
}

.group-log-panel-wallboard .log-output-shell {
    padding: 0;
    border: 0;
    background: transparent;
}

.pod-exec-toolbar {
    display: grid;
    grid-template-columns: minmax(10rem, 0.9fr) minmax(14rem, 1.4fr) auto;
    gap: var(--space-3);
    align-items: end;
}

.pod-exec-command-field {
    min-width: 0;
}

.pod-exec-toolbar-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.pod-exec-output-shell {
    display: grid;
    gap: var(--space-3);
}

.pod-exec-output-list {
    display: grid;
    gap: var(--space-2);
    max-height: 26rem;
    overflow: auto;
    padding: var(--space-3);
    border: 1px solid rgba(16, 33, 54, 0.08);
    border-radius: var(--radius-md);
    background: #0f1728;
}

.pod-exec-frame {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: var(--radius-sm);
    background: rgba(15, 23, 42, 0.72);
}

.pod-exec-frame-stderr {
    border-color: rgba(245, 158, 11, 0.36);
    background: linear-gradient(180deg, rgba(84, 46, 12, 0.44), rgba(15, 23, 42, 0.78));
}

.pod-exec-frame-status {
    border-color: rgba(96, 165, 250, 0.28);
    background: linear-gradient(180deg, rgba(20, 41, 69, 0.52), rgba(15, 23, 42, 0.78));
}

.pod-exec-frame-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.pod-exec-frame-text {
    margin: 0;
    color: #dfe6f2;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.pod-exec-input-row {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.pod-exec-input-row .text-input {
    flex: 1 1 auto;
}

.log-output {
    margin: 0;
    min-height: 18rem;
    max-height: 34rem;
    overflow: auto;
    padding: var(--space-4);
    border: 1px solid rgba(16, 33, 54, 0.08);
    border-radius: var(--radius-md);
    background: #0f1728;
    color: #dfe6f2;
    font-family: var(--font-mono);
    font-size: 0.83rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.log-entry-list {
    display: grid;
    gap: var(--space-3);
}

.log-entry-card {
    border: 1px solid rgba(16, 33, 54, 0.08);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.95));
    overflow: hidden;
}

.log-entry-card.selected {
    border-color: rgba(8, 86, 163, 0.22);
    box-shadow: 0 0 0 3px rgba(8, 86, 163, 0.08);
}

.log-entry-select {
    display: grid;
    width: 100%;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.log-entry-select:focus-visible {
    outline: 2px solid var(--app-focus-ring);
    outline-offset: -2px;
    box-shadow: inset 0 0 0 4px var(--app-focus-shadow);
}

.log-entry-header,
.log-entry-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: var(--space-3);
}

.log-entry-badges,
.log-entry-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.log-entry-message {
    margin: 0;
    color: #12314e;
    font-weight: 600;
    line-height: 1.45;
}

.log-entry-raw {
    display: block;
    padding: var(--space-3);
    border: 1px solid rgba(16, 33, 54, 0.08);
    border-radius: var(--radius-md);
    background: #0f1728;
    color: #dfe6f2;
    font-family: var(--font-mono);
    font-size: 0.81rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.log-entry-detail {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid rgba(16, 33, 54, 0.08);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(251, 253, 255, 0.98), rgba(245, 250, 255, 0.95));
}

@container (max-width: 34rem) {
    .log-toolbar,
    .log-preset-bar,
    .log-filter-row {
        grid-template-columns: 1fr;
    }

    .log-toolbar-support,
    .log-actions,
    .log-filter-row-actions,
    .log-entry-actions {
        justify-content: flex-start;
        align-items: stretch;
        flex-direction: column;
    }

    .log-entry-header,
    .log-entry-detail-header {
        flex-direction: column;
    }
}

.log-group-list {
    display: grid;
    gap: var(--space-3);
}

.log-group-card {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid rgba(16, 33, 54, 0.08);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.95));
}

.log-group-card.log-severity-info {
    border-color: rgba(8, 86, 163, 0.16);
    background: linear-gradient(180deg, rgba(242, 248, 255, 0.98), rgba(255, 255, 255, 0.98));
}

.log-group-card.log-severity-warning {
    border-color: rgba(176, 116, 27, 0.18);
    background: linear-gradient(180deg, rgba(255, 249, 239, 0.98), rgba(255, 255, 255, 0.98));
}

.log-group-card.log-severity-danger {
    border-color: rgba(196, 61, 57, 0.18);
    background: linear-gradient(180deg, rgba(255, 243, 242, 0.98), rgba(255, 255, 255, 0.98));
}

.log-group-card.log-severity-debug,
.log-group-card.log-severity-trace {
    border-color: rgba(92, 108, 133, 0.16);
    background: linear-gradient(180deg, rgba(246, 248, 252, 0.98), rgba(255, 255, 255, 0.98));
}

.log-group-header {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    align-items: center;
}

.log-group-header h5 {
    margin: 0;
    color: #17314c;
}

.grouped-log-output {
    min-height: 0;
    max-height: 22rem;
}

.detail-grid {
    display: grid;
    gap: var(--space-3);
    margin: 0;
}

.detail-grid div {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3);
    border: 1px solid rgba(16, 33, 54, 0.08);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.82);
}

.detail-grid dt {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--app-text-muted);
}

.detail-grid dd {
    margin: 0;
    color: #0f1728;
    overflow-wrap: anywhere;
}

.related-list {
    display: grid;
    gap: var(--space-3);
}

.dependency-graph-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.85fr) minmax(0, 1fr);
    gap: var(--space-3);
    margin-top: var(--space-4);
    align-items: start;
}

.dependency-graph-column {
    display: grid;
    gap: var(--space-3);
}

.dependency-graph-column h5 {
    margin: 0;
}

.dependency-root-card {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid rgba(21, 94, 239, 0.22);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(232, 242, 255, 0.99), rgba(217, 233, 252, 0.96));
    box-shadow: 0 14px 28px rgba(8, 86, 163, 0.08);
}

.dependency-node-card {
    min-height: 100%;
}

.compact-transparency-panel {
    margin-top: var(--space-3);
    margin-bottom: var(--space-4);
}

:is(.app-header, .app-drawer-card, .hero-panel, .panel-card) {
    border-color: var(--app-surface-panel-border);
    background: var(--app-surface-panel-gloss), var(--app-surface-panel-bg);
    box-shadow: var(--elevation-raised);
}

.callout:not(.callout-success):not(.warning-callout):not(.session-loss-callout) {
    border-color: var(--app-surface-callout-border);
    background: var(--app-surface-callout-bg);
    box-shadow: var(--app-surface-workbench-shadow);
}

:is(
    .empty-state-card,
    .explorer-utility-panel,
    .explorer-query-workbench,
    .saved-view-shell,
    .log-workbench,
    .log-controls-panel,
    .transparency-panel,
    .work-canvas-rail-panel,
    .group-monitor-card,
    .group-monitor-section-card,
    .group-create-panel,
    .group-form-section,
    .group-builder-utility,
    .group-builder-utility-card,
    .metrics-summary-block,
    .setup-guide-card,
    .setup-command-card,
    .scope-switch-bar,
    .incident-selection-bar,
    .group-monitor-refresh-controls,
    .live-refresh-toggle,
    .table-shell,
    .inspector-fold-panel,
    .raw-manifest-panel,
    .dependency-graph-panel,
    .timeline-panel
) {
    border-color: var(--app-surface-workbench-border);
    background: var(--app-surface-workbench-bg);
    box-shadow: var(--app-surface-workbench-shadow);
}

:is(
    .fact-grid div,
    .group-monitor-fact-grid div,
    .transparency-command,
    .log-output-shell,
    .pod-exec-output-list,
    .timeline-event-card
) {
    border-color: var(--app-surface-inset-border);
    background: var(--app-surface-inset-bg);
    box-shadow: var(--app-surface-inset-shadow);
}

.group-monitor-card-strong {
    border-color: rgba(8, 86, 163, 0.18);
    background: linear-gradient(180deg, rgba(235, 245, 255, 0.98), rgba(251, 253, 255, 0.99));
    box-shadow: 0 16px 30px rgba(8, 86, 163, 0.08);
}

.app-shell[data-ui-theme="dark"] .group-monitor-card-strong {
    border-color: rgba(96, 165, 250, 0.24);
    background: linear-gradient(180deg, rgba(19, 36, 59, 0.98), rgba(12, 23, 40, 0.96));
    box-shadow: 0 18px 32px rgba(2, 6, 23, 0.28);
}

.group-log-panel-wallboard .log-output-shell {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.timeline-insights {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid rgba(245, 158, 11, 0.18);
    border-radius: var(--radius-md);
    background: rgba(255, 249, 235, 0.88);
}

.timeline-insight-list {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: var(--space-2);
}

.timeline-event-list {
    display: grid;
    gap: var(--space-3);
}

.timeline-event-card {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid rgba(16, 33, 54, 0.08);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.88);
}

.timeline-event-header,
.timeline-event-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.related-card {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--app-surface-inset-border);
    border-radius: var(--radius-md);
    background: var(--app-surface-inset-bg);
    box-shadow: var(--app-surface-inset-shadow);
}

.related-card-button {
    width: 100%;
    min-height: var(--app-hit-target);
    padding: var(--space-4);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        transform var(--motion-duration-fast) var(--motion-ease-standard),
        border-color var(--motion-duration-fast) var(--motion-ease-standard),
        box-shadow var(--motion-duration-fast) var(--motion-ease-standard),
        background-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.related-card-button:hover {
    background: rgba(244, 248, 255, 0.96);
    border-color: rgba(21, 94, 239, 0.22);
    box-shadow: 0 10px 24px rgba(21, 94, 239, 0.08);
    transform: translateY(var(--motion-lift-hover));
}

.related-card-button:focus-visible {
    outline: 2px solid var(--app-focus-ring);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--app-focus-shadow);
}

.related-label {
    font-size: var(--type-kicker);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--app-text-muted);
}

:is(
    .context-card,
    .fact-grid div,
    .group-monitor-fact-grid div,
    .detail-grid div,
    .transparency-command,
    .timeline-event-card,
    .related-card,
    .dependency-root-card,
    .log-group-card,
    .log-entry-card,
    .log-entry-detail,
    .first-run-tour-focus-item
) {
    border-color: rgba(16, 33, 54, 0.14);
    background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(243, 248, 254, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.88),
        0 14px 28px rgba(15, 23, 40, 0.06);
}

.app-shell[data-ui-theme="dark"] :is(
    .context-card,
    .fact-grid div,
    .group-monitor-fact-grid div,
    .detail-grid div,
    .transparency-command,
    .timeline-event-card,
    .related-card,
    .dependency-root-card,
    .log-group-card,
    .log-entry-card,
    .log-entry-detail,
    .first-run-tour-focus-item
) {
    border-color: rgba(191, 219, 254, 0.28);
    background: linear-gradient(180deg, rgba(82, 121, 177, 0.995), rgba(54, 86, 133, 0.99));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 16px 30px rgba(2, 6, 23, 0.22);
}

.toast-host {
    position: fixed;
    right: var(--space-5);
    bottom: var(--space-5);
    z-index: 1300;
    display: grid;
    gap: var(--space-3);
    width: min(24rem, calc(100vw - 2rem));
}

.toast-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-strong);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--elevation-overlay);
}

.toast-card p {
    margin: 0;
    color: var(--app-text-strong);
}

.toast-card .compact-button {
    align-self: start;
    padding: 0.42rem 0.75rem;
    border: 1px solid rgba(16, 33, 54, 0.14);
    border-radius: 0.7rem;
    background: rgba(16, 33, 54, 0.06);
    color: var(--app-text-body);
    font-weight: 700;
}

.toast-card.neutral {
    border-color: var(--border-strong);
}

.toast-card.success {
    border-color: var(--state-success-border);
    background: linear-gradient(180deg, rgba(242, 253, 249, 0.99), rgba(255, 255, 255, 0.98));
}

.toast-card.warning {
    border-color: var(--state-warning-border);
    background: linear-gradient(180deg, rgba(255, 249, 239, 0.99), rgba(255, 255, 255, 0.98));
}

.toast-card.danger {
    border-color: var(--state-danger-border);
    background: linear-gradient(180deg, rgba(255, 243, 242, 0.99), rgba(255, 255, 255, 0.98));
}

.app-shell[data-ui-theme="dark"] .toast-card.neutral {
    border-color: rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, rgba(19, 33, 53, 0.98), rgba(15, 23, 42, 0.96));
}

.app-shell[data-ui-theme="dark"] .toast-card.success {
    border-color: rgba(16, 185, 129, 0.28);
    background: linear-gradient(180deg, rgba(10, 49, 40, 0.98), rgba(15, 23, 42, 0.96));
}

.app-shell[data-ui-theme="dark"] .toast-card.warning {
    border-color: rgba(245, 158, 11, 0.3);
    background: linear-gradient(180deg, rgba(61, 38, 9, 0.98), rgba(15, 23, 42, 0.96));
}

.app-shell[data-ui-theme="dark"] .toast-card.danger {
    border-color: rgba(239, 68, 68, 0.3);
    background: linear-gradient(180deg, rgba(68, 20, 25, 0.98), rgba(15, 23, 42, 0.96));
}

.app-shell[data-ui-theme="dark"] .toast-card .compact-button {
    border-color: rgba(148, 163, 184, 0.2);
    background: rgba(255, 255, 255, 0.06);
    color: #e5eef9;
}

.tooltip-anchor,
[data-tooltip] {
    position: relative;
}

.tooltip-anchor::after,
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.45rem);
    transform: translateX(-50%) translateY(0.2rem);
    z-index: 40;
    min-width: max-content;
    max-width: min(18rem, calc(100vw - 2rem));
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: rgba(15, 23, 40, 0.96);
    color: #f8fafc;
    font-size: var(--type-body-compact);
    line-height: 1.35;
    white-space: normal;
    text-align: center;
    box-shadow: var(--elevation-overlay);
    opacity: 0;
    pointer-events: none;
    transition:
        opacity var(--motion-duration-fast) var(--motion-ease-standard),
        transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.tooltip-anchor:hover::after,
.tooltip-anchor:focus-visible::after,
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

#blazor-error-ui {
    color-scheme: light only;
    background: rgba(255, 248, 231, 0.98);
    border: 1px solid rgba(209, 139, 9, 0.3);
    border-radius: var(--radius-md);
    bottom: 1rem;
    box-shadow: var(--shadow-panel);
    display: none;
    left: 1rem;
    padding: 0.9rem 3rem 0.9rem 1rem;
    position: fixed;
    right: 1rem;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 0.8rem;
}

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 18vh 0 auto 0;
    margin: 0 auto;
}

.loading-progress circle {
    fill: none;
    stroke: rgba(16, 33, 54, 0.12);
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--brand-primary);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray var(--motion-duration-micro) var(--motion-ease-standard);
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: 700;
    color: var(--app-text-support);
    inset: calc(18vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

@media (max-width: 980px) {
    .app-shell {
        grid-template-columns: 1fr;
        gap: var(--space-4);
        padding-top: var(--space-4);
    }

    .app-drawer {
        position: sticky;
        top: 0;
        z-index: 20;
    }

    .app-drawer-card {
        gap: var(--space-3);
        padding: var(--space-3);
        max-height: none;
        overflow: visible;
    }

    .app-drawer-header .compact-copy,
    .app-drawer-badges {
        display: none;
    }

    .app-drawer-guide-header,
    .app-drawer-section-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .app-drawer-nav {
        grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    }

    .app-drawer-link {
        justify-content: center;
        min-height: 2.7rem;
        padding: 0.65rem 0.5rem;
        text-align: center;
    }

    .command-launch-hint {
        display: none;
    }

    .hero-panel,
    .content-grid {
        grid-template-columns: 1fr;
    }

    .app-header {
        padding: var(--space-5);
        flex-direction: column;
        align-items: stretch;
    }

    .app-header-actions {
        width: 100%;
        justify-content: stretch;
    }

    .app-header-status-panel {
        justify-items: start;
    }

    .command-launch-button {
        justify-content: space-between;
        width: 100%;
    }

    .fact-grid {
        grid-template-columns: 1fr;
    }

    .metrics-bar-list {
        grid-template-columns: 1fr;
    }

    .group-usage-bar-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .metrics-trend-grid {
        grid-template-columns: 1fr;
    }

    .group-monitor-overview-grid {
        grid-template-columns: 1fr;
    }

    .metrics-bar-row {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .explorer-surface,
    .work-canvas-grid,
    .work-canvas-bottom-rail,
    .filter-grid,
    .groups-page-shell,
    .group-wallboard-controls,
    .group-create-grid,
    .group-builder-grid,
    .group-title-grid,
    .group-builder-utility-shell,
    .group-rule-grid,
    .scope-switch-bar,
    .impact-preview-toolbar,
    .content-grid-wide,
    .saved-view-bar,
    .log-preset-bar,
    .log-filter-row {
        grid-template-columns: 1fr;
    }

    .log-toolbar {
        grid-template-columns: 1fr;
    }

    .group-search-entry {
        grid-template-columns: 1fr;
    }

    .group-metrics-header,
    .group-metrics-toolbar,
    .group-monitor-refresh-controls {
        grid-template-columns: 1fr;
    }

    .group-metrics-toolbar {
        justify-items: stretch;
    }

    .work-canvas-grid.has-bottom-rail,
    .work-canvas-grid:not(.has-bottom-rail) {
        grid-template-areas:
            "main"
            "inspector"
            "bottom";
    }

    .work-canvas-inspector {
        position: static;
        top: auto;
    }

    .group-metrics-toolbar .heading-statuses {
        justify-self: start;
    }

    .groups-page-header-actions {
        justify-items: start;
    }

    .dependency-graph-shell {
        grid-template-columns: 1fr;
    }

    .live-refresh-controls {
        min-width: 100%;
    }

    .grouped-explorer-summary,
    .resource-group-heading,
    .resource-pagination-bar,
    .resource-pagination-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .context-header,
    .field-row,
    .action-row,
    .stack-form-actions,
    .filter-actions,
    .saved-view-actions,
    .saved-view-support,
    .workspace-tools-actions,
    .log-filter-actions,
    .log-filter-row-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .action-button.prominent {
        width: 100%;
        min-width: 0;
    }

    .filter-actions .action-button {
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-shell *,
    .app-shell *::before,
    .app-shell *::after {
        animation-duration: var(--motion-duration-reduced) !important;
        animation-iteration-count: 1 !important;
        transition-duration: var(--motion-duration-reduced) !important;
        scroll-behavior: auto !important;
    }

    .app-drawer-link:hover,
    .command-palette-suggestion:hover,
    .related-card-button:hover,
    .action-button:hover,
    .resource-table tbody tr.resource-row:hover {
        transform: none !important;
    }
}