body {
    min-height: 100vh;
    font-family: "Avenir Next", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 400;
}

[data-theme="control-room"] {
    color-scheme: dark;
    --xtool-page-bg: #0b1118;
    --xtool-surface: #111923;
    --xtool-elevated: #172231;
    --xtool-raised: #1b2737;
    --xtool-border: #263445;
    --xtool-text: #eef4fa;
    --xtool-muted: #96a6b8;

    --color-base-100: var(--xtool-surface);
    --color-base-200: var(--xtool-elevated);
    --color-base-300: var(--xtool-border);
    --color-base-content: var(--xtool-text);
    --color-primary: #4f8cff;
    --color-primary-content: #07111f;
    --color-info: #4ab3d9;
    --color-info-content: #06131a;
    --color-success: #36c47d;
    --color-success-content: #06150f;
    --color-warning: #e2a93b;
    --color-warning-content: #1c1204;
    --color-error: #f2635f;
    --color-error-content: #1d0807;
    --radius-selector: 0.5rem;
    --radius-field: 0.5rem;
    --radius-box: 0.75rem;
    --border: 1px;
    --depth: 0;
}

.shell-layout {
    align-items: start;
}

.shell-sidebar {
    position: sticky;
    top: 1.5rem;
}

.shell-brand {
    min-height: 2.25rem;
}

.shell-content {
    min-height: calc(100vh - 4rem);
    overflow-x: hidden;
}

.shell-topbar {
    background: linear-gradient(180deg, color-mix(in oklab, var(--xtool-raised, transparent) 38%, transparent), transparent);
}

body.bg-base-200 {
    background:
        linear-gradient(180deg, color-mix(in oklab, var(--xtool-page-bg, #f8fafc) 88%, #112033 12%) 0%, var(--xtool-page-bg, #f8fafc) 42rem),
        var(--xtool-page-bg, #f8fafc);
}

[data-theme="control-room"] .shell-sidebar {
    background:
        linear-gradient(180deg, color-mix(in oklab, var(--xtool-surface) 72%, #05090f 28%), color-mix(in oklab, var(--xtool-page-bg) 84%, #05090f 16%)),
        var(--xtool-page-bg);
    border-color: color-mix(in oklab, var(--xtool-border) 64%, transparent);
    box-shadow: inset -1px 0 0 color-mix(in oklab, #fff 3%, transparent);
}

[data-theme="control-room"] .shell-content,
[data-theme="control-room"] .dropdown-content,
[data-theme="control-room"] .rounded-xl.border.border-base-300.bg-base-100,
[data-theme="control-room"] .rounded-lg.border.border-base-300.bg-base-100,
[data-theme="control-room"] .card {
    background-image: linear-gradient(180deg, color-mix(in oklab, var(--xtool-raised) 24%, transparent), transparent 11rem);
    border-color: color-mix(in oklab, var(--xtool-border) 86%, transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in oklab, #fff 4%, transparent),
        0 18px 40px color-mix(in oklab, #000 24%, transparent);
}

[data-theme="control-room"] .shell-nav-link {
    min-height: 2rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    color: color-mix(in oklab, var(--xtool-text) 72%, var(--xtool-muted) 28%);
    font-size: 0.8125rem;
    font-weight: 600;
}

[data-theme="control-room"] .shell-nav-link:hover {
    border-color: color-mix(in oklab, var(--xtool-border) 68%, transparent);
    background: color-mix(in oklab, var(--xtool-elevated) 42%, transparent);
    color: var(--xtool-text);
}

[data-theme="control-room"] .shell-nav-link[aria-current="page"] {
    border-color: color-mix(in oklab, var(--color-primary) 30%, var(--xtool-border) 70%);
    background: color-mix(in oklab, var(--color-primary) 16%, transparent);
    color: var(--xtool-text);
    box-shadow:
        inset 2px 0 0 color-mix(in oklab, var(--color-primary) 84%, #fff 16%),
        inset 0 1px 0 color-mix(in oklab, #fff 5%, transparent);
}

[data-theme="control-room"] .shell-nav-link[aria-disabled="true"] {
    border-color: transparent;
    background: transparent;
    cursor: not-allowed;
}

[data-theme="control-room"] .shell-layout[data-sidebar-state="collapsed"] .shell-sidebar {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

[data-theme="control-room"] .shell-layout[data-sidebar-state="collapsed"] .shell-brand {
    justify-content: center;
}

[data-theme="control-room"] .shell-layout[data-sidebar-state="collapsed"] .shell-nav-link {
    min-height: 2.25rem;
}

[data-theme="control-room"] .btn {
    border-radius: 0.5rem;
    font-weight: 600;
}

[data-theme="control-room"] .btn-outline {
    border-color: color-mix(in oklab, var(--xtool-border) 95%, #fff 5%);
    background-color: color-mix(in oklab, var(--xtool-surface) 64%, transparent);
}

[data-theme="control-room"] .btn-ghost:hover {
    background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
}

[data-theme="control-room"] .btn-primary {
    border-color: color-mix(in oklab, var(--color-primary) 80%, #fff 12%);
    background: linear-gradient(180deg, color-mix(in oklab, var(--color-primary) 92%, #fff 8%), color-mix(in oklab, var(--color-primary) 86%, #000 14%));
    color: var(--color-primary-content);
    box-shadow:
        inset 0 1px 0 color-mix(in oklab, #fff 22%, transparent),
        0 0 0 1px color-mix(in oklab, var(--color-primary) 18%, transparent),
        0 12px 26px color-mix(in oklab, var(--color-primary) 18%, transparent);
}

[data-theme="control-room"] .btn[data-dirty-submit]:disabled,
[data-theme="control-room"] .btn[data-dirty-submit][aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.42;
    filter: saturate(55%);
    box-shadow: none;
}

[data-theme="control-room"] [data-ds-card][data-selected="true"],
[data-theme="control-room"] [data-query-card][data-selected="true"] {
    border-color: color-mix(in oklab, var(--color-primary) 62%, #fff 8%) !important;
    background-color: color-mix(in oklab, var(--color-primary) 16%, transparent) !important;
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-primary) 26%, transparent);
}

[data-theme="control-room"] .input,
[data-theme="control-room"] .select,
[data-theme="control-room"] .textarea {
    border-color: color-mix(in oklab, var(--xtool-border) 86%, transparent);
    background-color: color-mix(in oklab, var(--xtool-surface) 76%, #000 24%);
}

[data-theme="control-room"] .input:focus,
[data-theme="control-room"] .input:focus-within,
[data-theme="control-room"] .select:focus,
[data-theme="control-room"] .textarea:focus {
    outline-color: color-mix(in oklab, var(--color-primary) 62%, transparent);
}

[data-theme="control-room"] .badge {
    border-radius: 0.5rem;
    font-weight: 650;
}

[data-theme="control-room"] .badge-outline,
[data-theme="control-room"] .badge-ghost {
    border-color: color-mix(in oklab, var(--xtool-border) 92%, #fff 8%);
    color: color-mix(in oklab, var(--xtool-text) 76%, var(--xtool-muted) 24%);
}

[data-theme="control-room"] .alert {
    border-color: color-mix(in oklab, var(--xtool-border) 86%, transparent);
    background-color: color-mix(in oklab, var(--xtool-elevated) 68%, transparent);
    color: var(--xtool-text);
}

[data-theme="control-room"] .tabs-boxed,
[data-theme="control-room"] .tabs-box {
    border: 1px solid color-mix(in oklab, var(--xtool-border) 86%, transparent);
    background-color: color-mix(in oklab, var(--xtool-surface) 76%, #000 24%);
}

[data-theme="control-room"] .tab-active {
    background-color: color-mix(in oklab, var(--color-primary) 16%, transparent);
    color: var(--xtool-text);
}

[data-theme="control-room"] .mockup-code,
[data-theme="control-room"] pre,
[data-theme="control-room"] code,
[data-theme="control-room"] .kbd {
    border-color: color-mix(in oklab, var(--xtool-border) 86%, transparent);
}

[data-theme="control-room"] .mockup-code,
[data-theme="control-room"] pre {
    background-color: color-mix(in oklab, #02060a 88%, var(--xtool-page-bg) 12%);
}

[data-theme="control-room"] .font-mono,
[data-theme="control-room"] code,
[data-theme="control-room"] pre,
[data-theme="control-room"] .mockup-code {
    font-family: "JetBrains Mono", ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, Consolas, monospace;
}

[data-theme="control-room"] .link {
    text-underline-offset: 0.18rem;
}

[data-theme="control-room"] .table {
    table-layout: auto;
}

[data-theme="control-room"] .table :where(thead tr) {
    border-color: var(--xtool-border);
    color: var(--xtool-muted);
}

[data-theme="control-room"] .table :where(tbody tr) {
    border-color: color-mix(in oklab, var(--xtool-border) 72%, transparent);
}

[data-theme="control-room"] .table-zebra tbody tr:nth-child(even) {
    background-color: color-mix(in oklab, var(--xtool-elevated) 38%, transparent);
}

.table {
    table-layout: auto;
}

.query-detail-actionbar {
    position: sticky;
    bottom: 0.75rem;
    z-index: 20;
    box-shadow: 0 18px 40px color-mix(in oklab, #000 24%, transparent);
}

@media (max-width: 640px) {
    .shell-layout {
        gap: 1rem;
    }

    .shell-content {
        min-height: auto;
    }

    .query-detail-actionbar {
        bottom: 0.5rem;
    }
}