:root {
    color-scheme: light;

    --cp-radius-sm: 0.5rem;
    --cp-radius-md: 0.75rem;
    --cp-radius-lg: 0.875rem;
    --cp-radius-xl: 1rem;
    --cp-radius-pill: 9999px;

    --cp-bg: #f5f3ef;
    --cp-surface: #ffffff;
    --cp-surface-muted: #f0ece6;
    --cp-panel-active: #e7ddd2;
    --cp-line: #ddd5cb;
    --cp-line-strong: #cfc4b8;

    --cp-accent: #db7558;
    --cp-accent-hover: #c86448;
    --cp-accent-contrast: #fcfbfc;
    --cp-accent-surface: rgba(219, 117, 88, 0.14);

    --cp-text: #686760;
    --cp-text-muted: #8d8b84;
    --cp-text-subtle: #a6a39c;
    --cp-text-bright: #181715;

    --cp-good-surface: rgba(31, 122, 67, 0.12);
    --cp-good-text: #1f7a43;
    --cp-info-surface: rgba(43, 103, 184, 0.12);
    --cp-info-text: #2b67b8;
    --cp-warn-surface: rgba(178, 106, 17, 0.14);
    --cp-warn-text: #b26a11;
    --cp-danger-surface: rgba(192, 62, 83, 0.12);
    --cp-danger-text: #c03e53;
    --cp-danger-hover: #ab3045;
    --cp-neutral-badge-surface: rgba(86, 84, 77, 0.12);
    --cp-neutral-badge-text: #56544d;
    --cp-input-surface: rgba(255, 255, 255, 0.55);
    --cp-code-surface: #181715;
    --cp-code-text: #fcfbfc;

    --cp-chart-grid: rgba(104, 103, 96, 0.18);
    --cp-chart-line: #5B8DEF;
    --cp-chart-text: #7b796f;
    --cp-tooltip-bg: #181715;
    --cp-tooltip-border: #26231f;
    --cp-tooltip-text: #fcfbfc;

    --cp-table-head: #f2ede7;
    --cp-table-row-hover: #faf7f3;
    --cp-table-shell: #f7f3ee;

    --cp-control-height: 2.5rem;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --cp-bg: #0a0a0a;
    --cp-surface: #131313;
    --cp-surface-muted: #191919;
    --cp-panel-active: #303030;
    --cp-line: #232323;
    --cp-line-strong: #2d2d2d;

    --cp-accent: #db7558;
    --cp-accent-hover: #e58a70;
    --cp-accent-contrast: #fcfbfc;
    --cp-accent-surface: rgba(219, 117, 88, 0.2);

    --cp-text: #acada8;
    --cp-text-muted: #92938e;
    --cp-text-subtle: #787974;
    --cp-text-bright: #fcfbfc;

    --cp-good-surface: rgba(61, 168, 103, 0.15);
    --cp-good-text: #81d4a3;
    --cp-info-surface: rgba(91, 141, 239, 0.16);
    --cp-info-text: #9ab7ff;
    --cp-warn-surface: rgba(219, 117, 88, 0.14);
    --cp-warn-text: #f1b29f;
    --cp-danger-surface: rgba(208, 91, 115, 0.18);
    --cp-danger-text: #ff9cac;
    --cp-danger-hover: #ffb3bf;
    --cp-neutral-badge-surface: #1f1f1f;
    --cp-neutral-badge-text: #c5c6c1;
    --cp-input-surface: #171717;
    --cp-code-surface: #050505;
    --cp-code-text: #fcfbfc;

    --cp-chart-grid: rgba(172, 173, 168, 0.12);
    --cp-chart-line: #5B8DEF;
    --cp-chart-text: #9a9b96;
    --cp-tooltip-bg: #1b1b1b;
    --cp-tooltip-border: #2c2c2c;
    --cp-tooltip-text: #fcfbfc;

    --cp-table-head: #171717;
    --cp-table-row-hover: #181818;
    --cp-table-shell: #101010;

    --cp-control-height: 2.5rem;
}

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

body.cp-app-body,
body.cp-auth-body {
    background: var(--cp-bg);
    color: var(--cp-text);
    transition: background-color 150ms ease, color 150ms ease;
}

.cp-main {
    color: inherit;
}

.cp-main-shell {
    min-height: 0;
    padding-inline: clamp(1rem, 2vw, 2rem);
    padding-top: 0.5rem;
}

.cp-footer {
    margin-top: auto;
    padding-top: 2rem;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
    color: var(--cp-text-subtle);
    font-size: 1rem;
    line-height: 1.75rem;
}

.cp-footer-link {
    color: var(--cp-text);
    font-weight: 600;
    transition: color 150ms ease;
}

.cp-footer-link:hover {
    color: var(--cp-accent);
}

.cp-auth-card {
    background: var(--cp-surface);
    border: 1px solid var(--cp-line);
    box-shadow: none;
}

.cp-theme-switch {
    background: var(--cp-surface);
    border: none;
    box-shadow: none;
}

.cp-header {
    background: transparent;
    border: none;
}

.cp-header-frame {
    width: 100%;
    padding: 0.75rem clamp(1rem, 2vw, 2rem) 0;
}

.cp-brand-link,
.cp-user-link {
    color: inherit;
    transition: background-color 150ms ease;
}

.cp-brand-link:hover,
.cp-user-link:hover {
    background: var(--cp-surface-muted);
}

.cp-text-bright {
    color: var(--cp-text-bright);
}

.cp-text-muted {
    color: var(--cp-text-muted);
}

.cp-nav-link,
.cp-button-primary,
.cp-button-secondary,
.cp-button-danger,
.cp-button-danger-subtle,
.cp-button-warning,
.cp-segmented-option,
.cp-theme-option,
.cp-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--cp-control-height);
    border-radius: var(--cp-radius-md);
    padding: 0.375rem 0.875rem;
    font-size: 0.875rem;
    white-space: nowrap;
    font-weight: 500;
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.cp-button-primary {
    border: none;
    background: var(--cp-accent);
    color: var(--cp-accent-contrast);
}

.cp-button-primary:hover {
    background: var(--cp-accent-hover);
}

.cp-button-primary:disabled,
.cp-button-secondary:disabled,
.cp-button-danger:disabled,
.cp-button-danger-subtle:disabled,
.cp-button-warning:disabled {
    cursor: not-allowed;
}

.cp-button-primary:disabled {
    background: var(--cp-surface-muted);
    color: var(--cp-text-muted);
}

.cp-button-secondary:disabled {
    background: var(--cp-surface-muted);
    color: var(--cp-text-muted);
}

.cp-button-danger {
    border: none;
    background: var(--cp-danger-text);
    color: var(--cp-accent-contrast);
}

.cp-button-danger:hover {
    background: var(--cp-danger-hover);
}

.cp-button-danger:disabled {
    background: var(--cp-surface-muted);
    color: var(--cp-text-muted);
}

.cp-button-danger-subtle {
    border: none;
    background: var(--cp-danger-surface);
    color: var(--cp-danger-text);
}

.cp-button-danger-subtle:hover {
    background: var(--cp-surface-muted);
    color: var(--cp-danger-text);
}

.cp-button-danger-subtle:disabled {
    background: var(--cp-surface-muted);
    color: var(--cp-text-muted);
}

.cp-button-warning {
    border: none;
    background: var(--cp-warn-surface);
    color: var(--cp-warn-text);
}

.cp-button-warning:hover {
    background: var(--cp-surface-muted);
    color: var(--cp-warn-text);
}

.cp-button-warning:disabled {
    background: var(--cp-surface-muted);
    color: var(--cp-text-muted);
}

.cp-button-secondary,
.cp-nav-link.cp-nav-link--active {
    border: none;
    color: var(--cp-text-bright);
    background: var(--cp-surface-muted);
}

.cp-button-secondary:hover,
.cp-nav-link--active:hover {
    background: var(--cp-panel-active);
    color: var(--cp-text-bright);
}

.cp-nav-link {
    color: var(--cp-text);
}

.cp-nav-link:hover {
    background: var(--cp-surface-muted);
}

.cp-tab {
    border: 1px solid var(--cp-line);
    background: var(--cp-surface);
    color: var(--cp-text);
}

.cp-tab:hover {
    background: var(--cp-surface-muted);
    color: var(--cp-text-bright);
}

.cp-tab--active {
    border-color: transparent;
    background: var(--cp-accent-surface);
    color: var(--cp-accent);
}

.cp-tab--active:hover {
    background: var(--cp-accent-surface);
    color: var(--cp-accent);
}

.cp-segmented-control {
    display: inline-flex;
    align-items: stretch;
    gap: 0.125rem;
    min-width: 0;
    min-height: var(--cp-control-height);
    border-radius: var(--cp-radius-lg);
    padding: 2px;
    background: var(--cp-surface);
    border: none;
}

.cp-segmented-option,
.cp-theme-option {
    border: 1px solid transparent;
    background: transparent;
    color: var(--cp-text-muted);
    flex-shrink: 0;
}

.cp-segmented-option:hover,
.cp-theme-option:hover {
    background: var(--cp-surface-muted);
    color: var(--cp-text-bright);
}

.cp-segmented-option--active,
.cp-theme-option--active {
    border-color: transparent;
    background: var(--cp-bg);
    color: var(--cp-text-bright);
}

.cp-theme-option {
    width: 2.25rem;
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: 0.5rem;
}

.cp-theme-option svg {
    width: 1.125rem;
    height: 1.125rem;
    flex: 0 0 auto;
}

.cp-badge,
.cp-badge--neutral,
.cp-badge--good,
.cp-badge--info,
.cp-badge--warn,
.cp-badge--danger {
    color: inherit;
}

.cp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 1.5rem;
    max-width: 100%;
    border-radius: var(--cp-radius-pill);
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    white-space: nowrap;
}

.cp-badge--neutral {
    background: var(--cp-neutral-badge-surface);
    color: var(--cp-neutral-badge-text);
}

.cp-badge--good {
    background: var(--cp-good-surface);
    color: var(--cp-good-text);
}

.cp-badge--info {
    background: var(--cp-info-surface);
    color: var(--cp-info-text);
}

.cp-badge--warn {
    background: var(--cp-warn-surface);
    color: var(--cp-warn-text);
}

.cp-badge--danger {
    background: var(--cp-danger-surface);
    color: var(--cp-danger-text);
}

.cp-alert {
    border-radius: var(--cp-radius-xl);
    border: 1px solid color-mix(in srgb, currentColor 50%, transparent);
    padding: 1rem;
    font-size: 0.9rem;
}

.cp-alert--success {
    background: var(--cp-good-surface);
    color: var(--cp-good-text);
}

.cp-alert--warning {
    background: var(--cp-warn-surface);
    color: var(--cp-warn-text);
}

.cp-alert--info {
    background: var(--cp-info-surface);
    color: var(--cp-info-text);
}

.cp-alert--error {
    background: var(--cp-danger-surface);
    color: var(--cp-danger-text);
}

.cp-alert a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.cp-validation-summary:empty {
    display: none;
}

.cp-menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cp-control-height);
    height: var(--cp-control-height);
    border-radius: var(--cp-radius-md);
    border: none;
    background: var(--cp-surface-muted);
    color: var(--cp-text);
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.cp-menu-button:hover {
    background: var(--cp-panel-active);
    color: var(--cp-text-bright);
}

.cp-actions-trigger {
    padding-inline: 0.875rem 0.75rem;
}

.cp-actions-trigger__chevron {
    flex: 0 0 auto;
}


.cp-menu-button:focus-visible,
.cp-menu-item:focus-visible,
.cp-nav-link:focus-visible,
.cp-sidebar-nav__link:focus-visible,
.cp-button-primary:focus-visible,
.cp-button-secondary:focus-visible,
.cp-button-danger:focus-visible,
.cp-button-danger-subtle:focus-visible,
.cp-button-warning:focus-visible,
.cp-tab:focus-visible,
.cp-theme-option:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--cp-accent);
}

.cp-menu-panel {
    background: color-mix(in srgb, var(--cp-surface) 86%, var(--cp-line) 14%);
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-radius-xl);
    box-shadow: 0 18px 40px rgba(24, 23, 21, 0.18), 0 2px 8px rgba(24, 23, 21, 0.10);
    padding: 0.5rem;
}

:root[data-theme="dark"] .cp-menu-panel {
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.58), 0 2px 10px rgba(0, 0, 0, 0.36);
}

.cp-menu-item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
    border-radius: var(--cp-radius-md);
    padding: 0.5rem 0.75rem;
    text-align: left;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--cp-text);
    transition: color 150ms ease, background-color 150ms ease;
}

.cp-menu-item__icon {
    flex: 0 0 auto;
    color: var(--cp-text-muted);
}

.cp-menu-item:hover .cp-menu-item__icon,
.cp-menu-item:focus-visible .cp-menu-item__icon {
    color: currentColor;
}

.cp-menu-item--destructive .cp-menu-item__icon {
    color: var(--cp-danger-text);
}

.cp-menu-item:hover {
    background: var(--cp-bg);
    color: var(--cp-text-bright);
}

.cp-menu-item--destructive {
    color: var(--cp-danger-text);
}

.cp-menu-item--destructive:hover {
    background: var(--cp-bg);
}

.cp-menu-item--disabled,
.cp-menu-item[aria-disabled="true"] {
    cursor: not-allowed;
    color: var(--cp-text-subtle);
}

.cp-menu-empty {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--cp-text-muted);
}

.cp-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Compatibility layer for legacy utility classes while pages migrate to cp-* components. */
.rounded-xl { border-radius: var(--cp-radius-md) !important; }
.rounded-2xl { border-radius: var(--cp-radius-xl) !important; }
.rounded-full { border-radius: var(--cp-radius-pill) !important; }

.bg-white { background-color: var(--cp-surface) !important; }
.bg-gray-50,
.bg-slate-50,
.bg-gray-100,
.bg-slate-100 { background-color: var(--cp-surface-muted) !important; }
.bg-gray-950 { background-color: var(--cp-code-surface) !important; }
.bg-emerald-50,
.bg-emerald-100 { background-color: var(--cp-good-surface) !important; }
.bg-amber-50,
.bg-amber-100,
.bg-yellow-50 { background-color: var(--cp-warn-surface) !important; }
.bg-rose-50,
.bg-rose-100,
.bg-red-50 { background-color: var(--cp-danger-surface) !important; }
.bg-blue-50,
.bg-sky-50,
.bg-violet-50 { background-color: var(--cp-info-surface) !important; }
.bg-rose-700,
.bg-red-700 { background-color: var(--cp-danger-text) !important; }

.text-white,
.text-gray-100 { color: var(--cp-accent-contrast) !important; }
.text-gray-900,
.text-gray-800,
.text-slate-900 { color: var(--cp-text-bright) !important; }
.text-gray-700,
.text-slate-700,
.text-gray-600,
.text-slate-600 { color: var(--cp-text) !important; }
.text-gray-500,
.text-gray-400,
.text-gray-300,
.text-slate-500 { color: var(--cp-text-muted) !important; }
.text-emerald-700,
.text-green-700,
.text-emerald-600 { color: var(--cp-good-text) !important; }
.text-amber-700,
.text-yellow-700,
.text-amber-800,
.text-amber-900,
.text-yellow-900 { color: var(--cp-warn-text) !important; }
.text-rose-700,
.text-red-700,
.text-rose-900,
.text-red-800 { color: var(--cp-danger-text) !important; }
.text-blue-700,
.text-blue-800,
.text-sky-700,
.text-violet-700 { color: var(--cp-info-text) !important; }

.border-gray-100,
.border-gray-200,
.border-gray-300,
.border-slate-200,
.divide-gray-100,
.divide-gray-200,
.ring-gray-100,
.ring-gray-200 { border-color: var(--cp-line) !important; }
.border-emerald-200,
.border-green-200,
.border-emerald-700 { border-color: var(--cp-good-text) !important; }
.border-amber-200,
.border-yellow-200 { border-color: var(--cp-warn-text) !important; }
.border-rose-200,
.border-red-200,
.border-red-300 { border-color: var(--cp-danger-text) !important; }
.border-blue-200,
.border-sky-200 { border-color: var(--cp-info-text) !important; }

.hover\:bg-gray-50:hover,
.hover\:bg-gray-100:hover,
.hover\:bg-slate-50:hover { background-color: var(--cp-surface-muted) !important; }
.hover\:bg-rose-50:hover,
.hover\:bg-red-50:hover { background-color: var(--cp-danger-surface) !important; }
.hover\:bg-emerald-50:hover { background-color: var(--cp-good-surface) !important; }
.hover\:bg-rose-600:hover,
.hover\:bg-red-600:hover { background-color: var(--cp-danger-hover) !important; }
.hover\:text-gray-900:hover { color: var(--cp-text-bright) !important; }
.hover\:text-yellow-900:hover { color: var(--cp-warn-text) !important; }
.hover\:border-gray-400:hover { border-color: var(--cp-line-strong) !important; }
.hover\:text-emerald-500:hover,
.hover\:border-emerald-500:hover { color: var(--cp-accent-hover) !important; border-color: var(--cp-accent-hover) !important; }

.shadow-sm,
.shadow,
.shadow-xl,
.shadow-2xl { box-shadow: none !important; }

.ring-1 { --tw-ring-color: var(--cp-line) !important; }
.ring-gray-100,
.ring-gray-200 { --tw-ring-color: var(--cp-line) !important; }
.divide-gray-100 > :not([hidden]) ~ :not([hidden]),
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--cp-line) !important; }

.cp-text-good {
    color: var(--cp-good-text);
}

.cp-header-shell {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.cp-header-top {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.cp-header-brand-slot,
.cp-header-actions,
.cp-header-theme-slot,
.cp-header-user-slot {
    min-width: 0;
}

.cp-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.cp-header-theme-slot,
.cp-header-user-slot {
    display: flex;
    align-items: center;
}

.cp-userbar {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    min-width: 0;
}

.cp-user-summary {
    min-width: 0;
}

.cp-app-shell {
    display: grid;
    width: 100%;
    flex: 1 0 auto;
    gap: 1rem;
    padding-top: 0.5rem;
}

.cp-sidebar-slot,
.cp-content-shell {
    min-width: 0;
}

.cp-sidebar-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: none;
    border-radius: var(--cp-radius-xl);
    background: transparent;
    padding: 0.75rem;
}

.cp-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cp-sidebar-nav__link {
    display: flex;
    min-height: var(--cp-control-height);
    align-items: center;
    gap: 0.625rem;
    border-radius: var(--cp-radius-md);
    padding: 0.5rem 0.625rem;
    color: var(--cp-text);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.cp-sidebar-nav__link:hover {
    background: var(--cp-surface-muted);
    color: var(--cp-text-bright);
}

.cp-sidebar-nav__link--active {
    background: var(--cp-accent-surface);
    color: var(--cp-accent);
}

.cp-sidebar-nav__link--active:hover {
    background: var(--cp-accent-surface);
    color: var(--cp-accent);
}

.cp-sidebar-nav__link .cp-menu-item__icon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    color: currentColor;
}

.cp-sidebar-nav__link span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cp-content-shell {
    display: flex;
    min-height: 0;
    flex-direction: column;
}

.cp-content-shell--solo {
    flex: 1 0 auto;
    padding-top: 0.5rem;
}

.cp-dashboard-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cp-page-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cp-page-hero,
.cp-table-shell {
    background: var(--cp-surface);
    border: 1px solid var(--cp-line);
    box-shadow: none;
    border-radius: var(--cp-radius-xl);
}

.cp-page-hero {
    padding: 1.25rem;
}

.cp-page-hero__header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cp-page-hero__topline {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cp-page-hero__body {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.cp-page-title {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 600;
    color: var(--cp-text-bright);
}

.cp-page-description {
    max-width: 48rem;
    font-size: 0.875rem;
    line-height: 1.5rem;
    margin-bottom: 1rem;
    color: var(--cp-text-muted);
}

.cp-page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.cp-page-toolbar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cp-modules-toolbar {
    display: grid;
    gap: 0.75rem;
    width: 100%;
}

.cp-modules-hero__body {
    gap: 0.75rem;
}

.cp-modules-toolbar__search,
.cp-modules-toolbar__selectors {
    min-width: 0;
}

.cp-modules-toolbar__selectors {
    display: grid;
    gap: 0.75rem;
}

.cp-page-summary {
    align-self: flex-start;
    border-radius: var(--cp-radius-lg);
    background: var(--cp-surface-muted);
    padding: 0.5rem 0.8125rem;
    font-size: 0.8125rem;
    color: var(--cp-text-muted);
}

.cp-page-summary strong {
    color: var(--cp-text-bright);
    font-weight: 600;
}

.cp-inline-form,
.cp-filters-form {
    display: grid;
    gap: 0.75rem;
}

.cp-field-stack {
    display: grid;
    gap: 0.375rem;
    min-width: 0;
}

.cp-field-label {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: .9rem;
    color: var(--cp-text-muted);
}

.cp-page-hero .cp-field-label {
    margin-top: 0.5rem;
}

.cp-filter-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
}

.cp-inline-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-self: start;
    gap: 0.5rem;
}

.cp-inline-form--hero {
    width: 100%;
}


.cp-input,
.cp-select,
.cp-textarea {
    width: 100%;
    min-height: var(--cp-control-height);
    border-radius: var(--cp-radius-lg);
    border: 1px solid var(--cp-line);
    background-color: var(--cp-input-surface);
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    color: var(--cp-text-bright);
    outline: none;
    box-shadow: none;
    transition: background-color 150ms ease, border-color 150ms ease;
}

.cp-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2392938e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1rem 1rem;
    padding-right: 2.75rem;
}

.cp-input::placeholder {
    color: var(--cp-text-muted);
}

.cp-app-body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
.cp-app-body select,
.cp-app-body textarea {
    background-color: var(--cp-input-surface);
    color: var(--cp-text-bright);
    border: 1px solid var(--cp-line);
    box-shadow: none;
}

.cp-app-body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):focus,
.cp-app-body textarea:focus {
    background-color: var(--cp-bg);
    border-color: var(--cp-line);
    box-shadow: none;
}

.cp-app-body select:focus {
    background-color: var(--cp-input-surface);
    border-color: var(--cp-line);
    box-shadow: none;
}

.cp-app-body input[type="checkbox"],
.cp-app-body input[type="radio"] {
    accent-color: var(--cp-accent);
}


.cp-input:focus,
.cp-select:focus,
.cp-textarea:focus,
.cp-button-primary:focus,
.cp-button-secondary:focus,
.cp-button-danger:focus,
.cp-button-danger-subtle:focus,
.cp-button-warning:focus,
.cp-nav-link:focus,
.cp-sidebar-nav__link:focus,
.cp-tab:focus,
.cp-theme-option:focus,
.cp-segmented-option:focus {
    box-shadow: 0 0 0 2px var(--cp-accent);
}

.cp-input:focus,
.cp-textarea:focus {
    background-color: var(--cp-bg);
    border-color: var(--cp-line);
    box-shadow: none;
}

.cp-select:focus {
    background-color: var(--cp-input-surface);
    border-color: var(--cp-line);
    box-shadow: none;
}

.cp-field-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
}

.cp-field-span-full,
.cp-field-span-wide {
    min-width: 0;
}

.cp-field-error {
    display: block;
    min-height: 1rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--cp-danger-text);
}

.cp-field-error:empty {
    display: none;
}

.cp-field-hint {
    font-size: 0.8125rem;
    line-height: 1.25rem;
    color: var(--cp-text-muted);
}

.cp-checkbox-row {
    display: inline-flex;
    min-height: var(--cp-control-height);
    align-items: center;
    gap: 0.625rem;
    border-radius: var(--cp-radius-lg);
    background: var(--cp-surface-muted);
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--cp-text);
}

.cp-checkbox-row input {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    accent-color: var(--cp-accent);
}

.cp-checkbox-row--compact {
    width: fit-content;
    min-height: 2.25rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

.cp-checkbox-row--full {
    display: flex;
    width: 100%;
    justify-content: flex-start;
}

.cp-node-edit {
    width: 100%;
}

.cp-node-edit-kicker {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cp-text-muted);
}

.cp-node-edit-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cp-node-edit-section,
.cp-node-edit-details {
    overflow: hidden;
}

.cp-node-edit-section {
    padding: 1.25rem;
}

.cp-node-edit-section-header,
.cp-node-edit-subsection-header,
.cp-node-edit-fee-role-header,
.cp-node-edit-credential-row,
.cp-node-edit-share-meter {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.cp-node-edit-section-header {
    margin-bottom: 1rem;
}

.cp-node-edit-section-title,
.cp-node-edit-subtitle {
    display: block;
    color: var(--cp-text-bright);
    font-weight: 600;
}

.cp-node-edit-section-title {
    font-size: 1rem;
    line-height: 1.5rem;
}

.cp-node-edit-subtitle {
    font-size: 0.9375rem;
    line-height: 1.375rem;
}

.cp-node-edit-section-subtitle {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.5rem;
    color: var(--cp-text-muted);
}

.cp-node-edit-summary {
    display: flex;
    cursor: pointer;
    list-style: none;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem;
    color: var(--cp-text);
}

.cp-node-edit-summary::-webkit-details-marker {
    display: none;
}

.cp-node-edit-summary::after {
    width: 0.625rem;
    height: 0.625rem;
    flex: 0 0 auto;
    border-right: 2px solid var(--cp-text-muted);
    border-bottom: 2px solid var(--cp-text-muted);
    content: "";
    transform: rotate(45deg);
    transition: transform 150ms ease;
}

.cp-node-edit-details[open] > .cp-node-edit-summary::after {
    transform: rotate(225deg);
}

.cp-node-edit-details-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    border-top: 1px solid var(--cp-line);
    padding: 1.25rem;
}

.cp-node-edit-subsection {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cp-node-edit-subsection + .cp-node-edit-subsection {
    border-top: 1px solid var(--cp-line);
    padding-top: 1.25rem;
}

.cp-node-edit-callout,
.cp-node-edit-empty {
    border-radius: var(--cp-radius-lg);
    background: var(--cp-surface-muted);
    padding: 0.75rem 0.875rem;
    font-size: 0.875rem;
    line-height: 1.5rem;
    color: var(--cp-text);
}

.cp-node-edit-share-meter {
    border-radius: var(--cp-radius-lg);
    background: var(--cp-surface-muted);
    padding: 0.875rem;
}

.cp-node-edit-fee-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cp-node-edit-fee-role {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-radius-xl);
    padding: 1rem;
}

.cp-node-edit-credential-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.cp-node-edit-subsection-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.cp-node-edit-fee-list--disabled {
    opacity: 0.62;
}

.cp-node-edit-actions {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
    border-top: 1px solid var(--cp-line);
    background: var(--cp-bg);
    padding: 0.875rem 0 0;
}

.cp-module-form-actions {
    background: var(--cp-surface);
}

.cp-table-shell {
    background: var(--cp-table-shell);
    overflow: hidden;
}

.cp-table-wrap {
    overflow-x: auto;
}

.cp-table {
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
}

.cp-table thead {
    background: var(--cp-table-head);
}

.cp-table th {
    padding: 0.75rem 1.25rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cp-text-muted);
    white-space: nowrap;
}

.cp-table td {
    padding: 0.875rem 1.25rem;
    color: var(--cp-text);
    vertical-align: middle;
    border-top: 1px solid var(--cp-line);
}

.cp-app-body table td {
    vertical-align: middle;
}

.cp-table tbody tr:hover {
    background: var(--cp-table-row-hover);
}

.cp-sort-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    transition: color 150ms ease;
}

.cp-sort-link:hover {
    color: var(--cp-text-bright);
}

.cp-sort-indicator {
    font-size: 0.75rem;
}

.cp-cell-heading {
    font-weight: 600;
    color: var(--cp-text-bright);
}

.cp-cell-subtle {
    color: var(--cp-text-muted);
}

.cp-inline-link {
    color: var(--cp-text-bright);
    transition: color 150ms ease;
}

.cp-inline-link:hover {
    color: var(--cp-accent);
}

.cp-cell-subtle .cp-inline-link {
    color: inherit;
}

.cp-table--dense th {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

.cp-table--dense td {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

.cp-table--events td {
    vertical-align: middle;
}

.cp-table-footer {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-top: 1px solid var(--cp-line);
    padding: 0.875rem 1.25rem;
}

.cp-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.cp-pagination__link,
.cp-pagination__current,
.cp-pagination__disabled {
    display: inline-flex;
    min-width: 2.5rem;
    min-height: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--cp-radius-md);
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.cp-pagination__link {
    background: var(--cp-surface);
    color: var(--cp-text);
}

.cp-pagination__link:hover {
    background: var(--cp-surface-muted);
    color: var(--cp-text-bright);
}

.cp-pagination__current {
    background: var(--cp-accent-surface);
    color: var(--cp-accent);
}

.cp-pagination__disabled {
    background: var(--cp-surface);
    color: var(--cp-text-subtle);
}

.cp-event-table-main {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    max-width: 44rem;
}

.cp-event-table-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.cp-event-table-title {
    min-width: 0;
    font-weight: 600;
    color: var(--cp-text-bright);
}

.cp-event-table-subline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--cp-text-muted);
}

.cp-event-table-subline > span {
    min-width: 0;
}

.cp-event-table-source {
    color: var(--cp-text);
}

.cp-event-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--cp-radius-pill);
    background: var(--cp-surface-muted);
    padding: 0.125rem 0.625rem;
    font-size: 0.6875rem;
    line-height: 1rem;
    font-weight: 600;
    color: var(--cp-text-muted);
    white-space: nowrap;
}

.cp-event-subject-cell {
    max-width: 16rem;
    color: var(--cp-text);
}

.cp-event-meta-stack {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.cp-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-events-list {
    display: flex;
    flex-direction: column;
    max-height: 32rem;
    overflow-y: auto;
}

.cp-event-row {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.75rem 1rem;
}

.cp-event-row__main {
    min-width: 0;
}

.cp-event-headline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.cp-event-subline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--cp-text-muted);
}

.cp-empty-state {
    padding: 2rem;
    text-align: center;
    color: var(--cp-text-muted);
}

.cp-update-banner,
.cp-card,
.cp-kpi-card {
    background: var(--cp-surface);
    border: 1px solid var(--cp-line);
    box-shadow: none;
}

.cp-update-banner,
.cp-card,
.cp-kpi-card,
.cp-event-icon,
.cp-chart-range {
    border-radius: var(--cp-radius-xl);
}

.cp-update-banner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1.25rem;
}

.cp-update-banner__content {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    min-width: 0;
}

.cp-update-banner__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border-radius: var(--cp-radius-pill);
    background: var(--cp-good-surface);
    color: var(--cp-good-text);
}

.cp-update-banner__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--cp-text-bright);
}

.cp-update-banner__subtitle {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--cp-text-muted);
}

.cp-update-banner__action {
    align-self: flex-start;
}

.cp-kpi-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
}

.cp-kpi-card {
    padding: 0.9375rem 1rem;
    min-width: 0;
}

.cp-kpi-label {
    font-size: 0.8125rem;
    color: var(--cp-text-muted);
}

.cp-kpi-value {
    margin-top: 0.125rem;
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 600;
    color: var(--cp-text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cp-kpi-multi-value {
    margin-top: 0.625rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.cp-kpi-metric-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.125rem;
}

.cp-kpi-metric-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--cp-text-muted);
    white-space: nowrap;
}

.cp-kpi-metric-value {
    max-width: 65%;
    min-width: 0;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--cp-text-bright);
}


.cp-card {
    overflow: hidden;
}

.cp-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
}

.cp-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cp-text-bright);
}

.cp-card-subtitle {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--cp-text-muted);
}

.cp-card-body {
    padding: 1.25rem;
}

.cp-card-body--spacious {
    padding: 1.25rem;
}

.cp-card-link {
    color: var(--cp-text-bright);
    transition: color 150ms ease;
}

.cp-card-link:hover {
    color: var(--cp-accent);
}

.cp-module-catalog {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
}

.cp-module-template-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1rem;
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-radius-xl);
    background: var(--cp-surface);
    padding: 1.25rem;
    color: inherit;
    text-decoration: none;
    transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}

.cp-module-template-card:hover {
    border-color: var(--cp-accent);
    background: var(--cp-surface-muted);
}

.cp-module-template-card:focus-visible {
    outline: none;
    border-color: var(--cp-accent);
    box-shadow: 0 0 0 2px var(--cp-accent);
}

.cp-module-template-card__top {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    min-width: 0;
}

.cp-module-template-card__heading {
    min-width: 0;
}

.cp-module-template-card__heading h3 {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    color: var(--cp-text-bright);
}

.cp-module-template-card__heading p {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.5rem;
    color: var(--cp-text-muted);
}

.cp-module-template-card__actions {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-start;
}

.cp-module-logo {
    display: inline-flex;
    width: 3rem;
    height: 3rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: var(--cp-radius-lg);
    background: var(--cp-surface-muted);
    color: var(--cp-text-bright);
    overflow: hidden;
}

.cp-module-logo--lg {
    width: 4rem;
    height: 4rem;
    border-radius: var(--cp-radius-xl);
}

.cp-module-logo img {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}

.cp-module-logo--lg img {
    width: 2.75rem;
    height: 2.75rem;
}

.cp-module-logo span {
    font-size: 1rem;
    line-height: 1;
    font-weight: 700;
}

.cp-code-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.0625rem 0.375rem;
    margin: 0 0.1875rem;
    border-radius: var(--cp-radius-sm);
    background: var(--cp-surface-muted);
    color: var(--cp-text-bright);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    line-height: 1.25rem;
}

.cp-module-capabilities {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cp-module-capabilities li {
    position: relative;
    padding-left: 1rem;
    font-size: 0.875rem;
    line-height: 1.375rem;
    color: var(--cp-text);
}

.cp-module-capabilities li::before {
    position: absolute;
    top: 0.56rem;
    left: 0;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: var(--cp-radius-pill);
    background: var(--cp-accent);
    content: "";
}

.cp-generated-name-preview,
.cp-readonly-field {
    display: flex;
    min-height: var(--cp-control-height);
    align-items: center;
    overflow-wrap: anywhere;
}

.cp-generated-name-preview {
    border-radius: var(--cp-radius-md);
    background: var(--cp-surface-muted);
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    color: var(--cp-text-bright);
}

.cp-button-compact {
    padding: 0.4375rem 0.75rem;
    font-size: 0.8125rem;
    border-radius: var(--cp-radius-md);
}

.cp-dashboard-empty {
    border-radius: var(--cp-radius-xl);
    border: none;
    background: var(--cp-surface-muted);
    padding: 2rem 1.25rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--cp-text-muted);
}

.cp-dashboard-empty--borderless {
    background: transparent;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.cp-form-surface {
    background: var(--cp-surface);
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-radius-xl);
    box-shadow: none;
}

.cp-empty-panel {
    background: transparent;
    border: 1px dashed var(--cp-line);
    border-radius: var(--cp-radius-md);
    color: var(--cp-text-muted);
}

.cp-token-box {
    background: var(--cp-surface);
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-radius-md);
    color: var(--cp-text-bright);
}

.cp-note-surface {
    background: var(--cp-surface-muted);
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-radius-md);
}

.cp-section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.875rem;
    border-bottom: 1px solid var(--cp-line);
    padding: 1rem 1.25rem;
}

.cp-clusters-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cp-cluster-topline {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cp-cluster-description {
    margin-top: 0.375rem;
    font-size: 0.875rem;
    color: var(--cp-text-muted);
}

.cp-cluster-meta {
    margin-top: 0.625rem;
    font-size: 0.75rem;
    color: var(--cp-text-muted);
}

.cp-cluster-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.875rem 1.5rem;
}

.cp-cluster-stat {
    text-align: right;
}

.cp-cluster-stat-label {
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--cp-text-muted);
}

.cp-cluster-stat-value {
    margin-top: 0.125rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    color: var(--cp-text-bright);
}

.cp-cluster-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.875rem;
    margin-top: 1rem;
}

.cp-chart-range {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border: none;
    background: var(--cp-surface);
}

.cp-chart-range-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.25rem;
    border: 1px solid transparent;
    border-radius: var(--cp-radius-md);
    background: transparent;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cp-text-muted);
    transition: color 150ms ease, background-color 150ms ease;
}

.cp-chart-range-button:hover {
    background: var(--cp-surface-muted);
    color: var(--cp-text-bright);
}

.cp-chart-range-button--active {
    background: var(--cp-bg);
    color: var(--cp-text-bright);
}

.cp-cluster-chart-shell {
    margin-top: 0.875rem;
}

.cp-event-row + .cp-event-row {
    border-top: 1px solid var(--cp-line);
}

.cp-event-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background: var(--cp-surface-muted);
    color: var(--cp-text-bright);
    font-size: 0.75rem;
    font-weight: 600;
}

.cp-event-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cp-text-bright);
}

.cp-event-subject {
    color: var(--cp-text);
}

.cp-event-details {
    min-width: 0;
    color: var(--cp-text-muted);
}

.cp-event-time {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--cp-text-muted);
}

@media (min-width: 640px) {
    .cp-field-grid--two,
    .cp-field-grid--three,
    .cp-field-grid--four,
    .cp-field-grid--five {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cp-field-span-full,
    .cp-field-span-wide {
        grid-column: 1 / -1;
    }

    .cp-node-edit-subsection-header,
    .cp-node-edit-fee-role-header,
    .cp-node-edit-credential-row,
    .cp-node-edit-share-meter {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .cp-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cp-module-catalog {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cp-inline-form {
        grid-template-columns: minmax(16rem, 24rem) auto auto;
        align-items: center;
    }

    .cp-inline-form--hero {
        grid-template-columns: minmax(18rem, 1fr) auto;
        align-items: end;
    }
}

@media (min-width: 768px) {
    .cp-header-top {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .cp-page-hero__header {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 1.5rem;
    }

    .cp-page-hero__topline {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1.5rem;
    }

    .cp-page-toolbar {
        align-items: flex-end;
    }

    .cp-table-footer {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .cp-update-banner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .cp-update-banner__action {
        align-self: center;
    }

    .cp-event-row {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }
}

@media (min-width: 1024px) {
    .cp-app-shell {
        grid-template-columns: minmax(15rem, 17rem) minmax(0, 1fr);
        align-items: start;
    }

    .cp-sidebar-slot {
        position: sticky;
        top: 0.75rem;
    }

    .cp-field-grid--three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cp-field-grid--four,
    .cp-field-grid--five {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .cp-field-span-wide {
        grid-column: span 2 / span 2;
    }

    .cp-kpi-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .cp-filters-form--nodes {
        grid-template-columns: minmax(0, 1.2fr) minmax(13.75rem, 0.9fr) minmax(11.25rem, 0.8fr) auto;
        align-items: end;
    }

    .cp-filters-form--events {
        grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(10.5rem, 0.7fr)) auto;
        align-items: end;
    }

    .cp-filters-form--devices {
        grid-template-columns: minmax(11rem, 0.9fr) minmax(12rem, 1fr) minmax(9rem, 0.7fr) minmax(9rem, 0.7fr) minmax(14rem, 1.2fr) auto;
        align-items: end;
    }

    .cp-modules-hero__body {
        flex-direction: row;
        align-items: baseline;
        justify-content: flex-start;
        gap: 1rem;
    }

    .cp-modules-toolbar {
        flex: 1 1 auto;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
        align-items: end;
    }

    .cp-modules-toolbar__selectors {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cp-modules-toolbar .cp-filter-actions {
        flex-wrap: nowrap;
        justify-self: end;
    }

    .cp-inline-form {
        grid-template-columns: minmax(16rem, 24rem) auto auto;
        align-items: end;
    }

    .cp-cluster-topline {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1.5rem;
    }

    .cp-cluster-stats-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        min-width: min(30rem, 100%);
    }
}

@media (min-width: 1280px) {
    .cp-field-grid--five {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .cp-module-catalog {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}