/* DESIGN-x.ai dark system override.
   Loaded only on non-home, non-creator landing/app pages. */
html:is(
    .combeat-page-login,
    .combeat-page-admin-login,
    .combeat-page-payment,
    .combeat-page-account,
    .combeat-page-inspiration,
    .combeat-page-canvas,
    .combeat-page-admin,
    .combeat-page-api-settings,
    .combeat-page-legal
) {
    color-scheme: dark !important;
    --xai-primary: #ffffff;
    --xai-on-primary: #0a0a0a;
    --xai-ink: #ffffff;
    --xai-body: #dadbdf;
    --xai-muted: #7d8187;
    --xai-hairline: #212327;
    --xai-canvas: #0a0a0a;
    --xai-canvas-soft: #1a1c20;
    --xai-card: #191919;
    --xai-mid: #363a3f;
    --xai-sunset: #ff7a17;
    --xai-dusk: #7c3aed;
    --xai-twilight: #c4b5fd;
    --xai-breeze: #a0c3ec;
    --xai-radius: 8px;
    --xai-pill: 9999px;

    --bg: var(--xai-canvas) !important;
    --page: var(--xai-canvas) !important;
    --stage: var(--xai-canvas) !important;
    --panel: var(--xai-card) !important;
    --panel-2: var(--xai-canvas-soft) !important;
    --panel-soft: var(--xai-canvas-soft) !important;
    --card: var(--xai-card) !important;
    --card-soft: var(--xai-canvas-soft) !important;
    --card-solid: var(--xai-card) !important;
    --soft: var(--xai-canvas-soft) !important;
    --soft-2: var(--xai-mid) !important;
    --control: var(--xai-canvas-soft) !important;
    --line: var(--xai-hairline) !important;
    --line-strong: var(--xai-mid) !important;
    --text: var(--xai-ink) !important;
    --muted: var(--xai-body) !important;
    --faint: var(--xai-muted) !important;
    --accent: var(--xai-primary) !important;
    --accent-text: var(--xai-on-primary) !important;
    --shadow: none !important;

    --cb-app-bg: var(--xai-canvas) !important;
    --cb-app-panel: var(--xai-card) !important;
    --cb-app-panel-2: var(--xai-canvas-soft) !important;
    --cb-app-surface: var(--xai-card) !important;
    --cb-app-control: var(--xai-canvas-soft) !important;
    --cb-app-control-hover: #22252a !important;
    --cb-app-line: var(--xai-hairline) !important;
    --cb-app-line-strong: var(--xai-mid) !important;
    --cb-app-text: var(--xai-ink) !important;
    --cb-app-muted: var(--xai-body) !important;
    --cb-app-faint: var(--xai-muted) !important;
    --cb-app-accent: var(--xai-primary) !important;
    --cb-app-accent-text: var(--xai-on-primary) !important;

    --cb-bg: var(--xai-canvas) !important;
    --cb-panel: var(--xai-card) !important;
    --cb-panel-2: var(--xai-canvas-soft) !important;
    --cb-control: var(--xai-canvas-soft) !important;
    --cb-control-hover: #22252a !important;
    --cb-line: var(--xai-hairline) !important;
    --cb-line-strong: var(--xai-mid) !important;
    --cb-text: var(--xai-ink) !important;
    --cb-muted: var(--xai-body) !important;
    --cb-faint: var(--xai-muted) !important;
}

html:is(
    .combeat-page-login,
    .combeat-page-admin-login,
    .combeat-page-payment,
    .combeat-page-account,
    .combeat-page-inspiration,
    .combeat-page-canvas,
    .combeat-page-admin,
    .combeat-page-api-settings,
    .combeat-page-legal
),
html:is(
    .combeat-page-login,
    .combeat-page-admin-login,
    .combeat-page-payment,
    .combeat-page-account,
    .combeat-page-inspiration,
    .combeat-page-canvas,
    .combeat-page-admin,
    .combeat-page-api-settings,
    .combeat-page-legal
) body {
    background: var(--xai-canvas) !important;
    background-color: var(--xai-canvas) !important;
    color: var(--xai-ink) !important;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
}

html:is(
    .combeat-page-login,
    .combeat-page-admin-login,
    .combeat-page-payment,
    .combeat-page-account,
    .combeat-page-inspiration,
    .combeat-page-canvas,
    .combeat-page-admin,
    .combeat-page-api-settings,
    .combeat-page-legal
) :is(.shell, .page, .main, .content, .wrap, .stage, main, section, .board, .canvas-gate) {
    background-color: var(--xai-canvas) !important;
    color: var(--xai-ink) !important;
}

html:is(
    .combeat-page-login,
    .combeat-page-admin-login,
    .combeat-page-payment,
    .combeat-page-account,
    .combeat-page-inspiration,
    .combeat-page-canvas,
    .combeat-page-admin,
    .combeat-page-api-settings,
    .combeat-page-legal
) :is(
    .topbar,
    .auth-card,
    .card,
    .metric,
    .tool-card,
    .plan,
    .table-wrap,
    .record-card,
    .notice-card,
    .modal-card,
    .site-info-dialog,
    .profile-mini,
    .level-card,
    .invite-bound-box,
    .qr,
    .ad-wrap,
    .preview-box,
    .empty,
    .canvas-nav,
    .library,
    .node,
    .gate-panel,
    .canvas-context-card,
    .canvas-minimap,
    .create-menu,
    .llm-chat-log,
    .llm-output,
    .model-panel,
    .image-edit-panel,
    .pay-config-card,
    .finance-card,
    .studio-admin-card,
    .route-step,
    .intercept-rule,
    .dashboard-mini-card,
    .dashboard-panel-card,
    .site-mini,
    .toolbar,
    details,
    .faq-card,
    footer
) {
    background: var(--xai-card) !important;
    background-color: var(--xai-card) !important;
    border: 1px solid var(--xai-hairline) !important;
    border-radius: var(--xai-radius) !important;
    color: var(--xai-ink) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html:is(
    .combeat-page-login,
    .combeat-page-admin-login,
    .combeat-page-payment,
    .combeat-page-account,
    .combeat-page-inspiration,
    .combeat-page-canvas,
    .combeat-page-admin,
    .combeat-page-api-settings,
    .combeat-page-legal
) :is(.panel, .panel.active):not(.sidebar):not(.admin-creator-sidebar) {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html:is(
    .combeat-page-login,
    .combeat-page-admin-login,
    .combeat-page-payment,
    .combeat-page-account,
    .combeat-page-inspiration,
    .combeat-page-canvas,
    .combeat-page-admin,
    .combeat-page-api-settings,
    .combeat-page-legal
) :is(input, textarea, select, .input, .textarea, .select, .search input, .field-frame) {
    background: var(--xai-canvas-soft) !important;
    background-color: var(--xai-canvas-soft) !important;
    border: 1px solid var(--xai-hairline) !important;
    border-radius: var(--xai-radius) !important;
    color: var(--xai-ink) !important;
    box-shadow: none !important;
}

html:is(
    .combeat-page-login,
    .combeat-page-admin-login,
    .combeat-page-payment,
    .combeat-page-account,
    .combeat-page-inspiration,
    .combeat-page-canvas,
    .combeat-page-admin,
    .combeat-page-api-settings,
    .combeat-page-legal
) :is(input, textarea, .input, .textarea, .search input)::placeholder {
    color: var(--xai-muted) !important;
    opacity: 1 !important;
}

html:is(
    .combeat-page-login,
    .combeat-page-admin-login,
    .combeat-page-payment,
    .combeat-page-account,
    .combeat-page-inspiration,
    .combeat-page-canvas,
    .combeat-page-admin,
    .combeat-page-api-settings,
    .combeat-page-legal
) :is(
    button,
    .btn,
    .ghost-btn,
    .primary-btn,
    .open-btn,
    .copy-btn,
    .replicate-btn,
    .billing-tab,
    .tab-btn,
    .record-tab,
    .card-action-btn,
    .preview-action-btn,
    .load-trigger,
    .canvas-minimap-btn,
    .tool-btn,
    .menu-btn,
    .secondary-btn,
    .circle-tool
):not(.nav-btn):not(.nav-item):not(.side-btn):not(.side-pill):not(.sidebar-toggle-btn) {
    min-height: 32px;
    border: 1px solid rgba(255, 255, 255, .25) !important;
    border-radius: var(--xai-pill) !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--xai-ink) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-weight: 400 !important;
}

html:is(
    .combeat-page-login,
    .combeat-page-admin-login,
    .combeat-page-payment,
    .combeat-page-account,
    .combeat-page-inspiration,
    .combeat-page-canvas,
    .combeat-page-admin,
    .combeat-page-api-settings,
    .combeat-page-legal
) :is(
    .btn.primary,
    .primary-btn,
    .open-btn,
    .billing-tab.active,
    .tab-btn.active,
    .record-tab.active,
    .plan.selected .open-btn
) {
    background: var(--xai-primary) !important;
    background-color: var(--xai-primary) !important;
    border-color: var(--xai-primary) !important;
    color: var(--xai-on-primary) !important;
}

html:is(
    .combeat-page-login,
    .combeat-page-admin-login,
    .combeat-page-payment,
    .combeat-page-account,
    .combeat-page-inspiration,
    .combeat-page-canvas,
    .combeat-page-admin,
    .combeat-page-api-settings,
    .combeat-page-legal
) :is(
    button,
    .btn,
    .ghost-btn,
    .primary-btn,
    .open-btn,
    .copy-btn,
    .replicate-btn,
    .billing-tab,
    .tab-btn,
    .record-tab,
    .card-action-btn,
    .preview-action-btn,
    .tool-btn
):not(.nav-btn):not(.nav-item):not(.side-btn):not(.side-pill):not(.sidebar-toggle-btn):hover {
    background: var(--xai-canvas-soft) !important;
    border-color: rgba(255, 255, 255, .34) !important;
    color: var(--xai-ink) !important;
    transform: none !important;
}

html:is(
    .combeat-page-login,
    .combeat-page-admin-login,
    .combeat-page-payment,
    .combeat-page-account,
    .combeat-page-inspiration,
    .combeat-page-canvas,
    .combeat-page-admin,
    .combeat-page-api-settings,
    .combeat-page-legal
) :is(h1, h2, h3, h4, .title, .top-title h1, .page-hero h1, .page-kicker h1, .section-head h2, .tool-head h2, .card-title, .plan-name, .price b, .metric .value, .level-card-name, .modal-title) {
    color: var(--xai-ink) !important;
    font-weight: 400 !important;
    letter-spacing: -.025em !important;
}

html:is(.combeat-page-payment, .combeat-page-login, .combeat-page-admin-login, .combeat-page-legal) :is(.page-hero h1, .auth-card h1, .card h1) {
    font-size: clamp(48px, 8vw, 96px) !important;
    line-height: 1 !important;
    letter-spacing: -.025em !important;
}

html:is(
    .combeat-page-login,
    .combeat-page-admin-login,
    .combeat-page-payment,
    .combeat-page-account,
    .combeat-page-inspiration,
    .combeat-page-canvas,
    .combeat-page-admin,
    .combeat-page-api-settings,
    .combeat-page-legal
) :is(p, small, .muted, .hint, .faint, .note, .meta, .top-title p, .page-hero p, .page-kicker p, .section-head p, .tool-head p, .price span, .price-note, .quota span, .benefit-list small, .card-prompt, .metric .label, .metric .hint, .level-card-hint, .level-benefits li, .record-note, .subtitle, .sub, .status) {
    color: var(--xai-body) !important;
    font-weight: 400 !important;
}

html:is(
    .combeat-page-login,
    .combeat-page-admin-login,
    .combeat-page-payment,
    .combeat-page-account,
    .combeat-page-inspiration,
    .combeat-page-canvas,
    .combeat-page-admin,
    .combeat-page-api-settings,
    .combeat-page-legal
) :is(.label, th, .nav-group-title, .side-section-title, .status, .pill, .discount, .badge, .page-kicker p) {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
}

html:is(
    .combeat-page-login,
    .combeat-page-admin-login,
    .combeat-page-payment,
    .combeat-page-account,
    .combeat-page-inspiration,
    .combeat-page-canvas,
    .combeat-page-admin,
    .combeat-page-api-settings,
    .combeat-page-legal
) :is(th, td) {
    border-bottom-color: var(--xai-hairline) !important;
}

html:is(
    .combeat-page-login,
    .combeat-page-admin-login,
    .combeat-page-payment,
    .combeat-page-account,
    .combeat-page-inspiration,
    .combeat-page-canvas,
    .combeat-page-admin,
    .combeat-page-api-settings,
    .combeat-page-legal
) th {
    background: var(--xai-canvas-soft) !important;
    color: var(--xai-muted) !important;
}

html.combeat-page-payment .page {
    justify-content: flex-start !important;
    padding: 64px 0 !important;
}

html.combeat-page-payment .plans {
    gap: 24px !important;
}

html.combeat-page-payment .plan {
    background: var(--xai-card) !important;
    border-color: var(--xai-hairline) !important;
    filter: none !important;
    transform: none !important;
}

html.combeat-page-payment .plan::before,
html.combeat-page-payment .plan::after {
    content: none !important;
    display: none !important;
}

html.combeat-page-payment .plan.selected {
    border-color: rgba(255, 255, 255, .42) !important;
}

html.combeat-page-payment :is(.billing-tabs, .quota, .invite-link) {
    background: var(--xai-canvas-soft) !important;
    border-color: var(--xai-hairline) !important;
}

html.combeat-page-inspiration .shell {
    padding: clamp(24px, 4vw, 64px) !important;
}

html.combeat-page-inspiration .topbar {
    position: sticky !important;
    top: 0 !important;
    background: linear-gradient(to bottom, var(--xai-canvas) 72%, rgba(10, 10, 10, 0)) !important;
    border: 0 !important;
}

html.combeat-page-inspiration .page-kicker h1 {
    font-size: clamp(40px, 6vw, 72px) !important;
    line-height: 1 !important;
}

html.combeat-page-inspiration .masonry {
    gap: 16px !important;
}

html.combeat-page-inspiration .masonry-column {
    gap: 16px !important;
}

html.combeat-page-inspiration .card {
    border-radius: var(--xai-radius) !important;
    overflow: hidden !important;
}

html.combeat-page-inspiration :is(.media-frame, .card-body, .preview-media) {
    background: var(--xai-canvas-soft) !important;
}

html.combeat-page-canvas {
    --grid: rgba(255, 255, 255, .08) !important;
    --canvas-dot-background: var(--xai-canvas) !important;
    --canvas-dot-color: rgba(255, 255, 255, .08) !important;
}

html.combeat-page-canvas .board {
    background-color: var(--xai-canvas) !important;
    background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px) !important;
    background-size: 24px 24px !important;
}

html.combeat-page-canvas .canvas-continue-bubble::before {
    background: var(--xai-card) !important;
    border-color: var(--xai-hairline) !important;
    box-shadow: none !important;
}

html.combeat-page-canvas .canvas-continue-input {
    background: transparent !important;
    border-color: transparent !important;
}

html.combeat-page-canvas .toolbar {
    border-radius: var(--xai-pill) !important;
    background: rgba(25, 25, 25, .92) !important;
}

html.combeat-page-admin.admin-flat-fixed :is(.main, .content, .topbar, .panel, .panel.active) {
    background: var(--xai-canvas) !important;
}

html.combeat-page-admin.admin-flat-fixed :is(.card, .metric, .table-wrap, .pay-config-card, .finance-card, .studio-admin-card, .route-step, .intercept-rule, .record-note, .notice-card, .notice-media, .record-preview, .site-mini, .toolbar, details) {
    background: var(--xai-card) !important;
    border-color: var(--xai-hairline) !important;
    border-radius: var(--xai-radius) !important;
}

@media (max-width: 760px) {
    html:is(.combeat-page-payment, .combeat-page-inspiration, .combeat-page-login, .combeat-page-admin-login, .combeat-page-legal) :is(.page, .shell) {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    html.combeat-page-payment .plans,
    html.combeat-page-payment .tools {
        grid-template-columns: 1fr !important;
    }
}