@import url("/static/combeat-theme.css?v=20260705-unified-color-spec");

/* Final visual and mobile polish for app pages. The public home page does not load this file. */
:root {
    --cb-polish-bg-light: var(--cb-theme-bg, #ffffff);
    --cb-polish-panel-light: var(--cb-theme-panel, #f0f4fa);
    --cb-polish-panel-2-light: var(--cb-theme-panel-hover, #e8eef7);
    --cb-polish-control-light: var(--cb-theme-control, #f1f3f4);
    --cb-polish-control-hover-light: var(--cb-theme-control-hover, #e8eaed);
    --cb-polish-line-light: var(--cb-theme-line, rgba(32, 33, 36, .08));
    --cb-polish-line-strong-light: var(--cb-theme-line-strong, rgba(32, 33, 36, .14));
    --cb-polish-text-light: var(--cb-theme-text, #202124);
    --cb-polish-muted-light: var(--cb-theme-muted, #5f6368);
    --cb-polish-faint-light: var(--cb-theme-faint, #8b929d);
    --cb-polish-accent-light: var(--cb-theme-accent, #0b57d0);
    --cb-polish-accent-text-light: #ffffff;

    --cb-polish-bg-dark: var(--cb-theme-bg, #0b0b0b);
    --cb-polish-panel-dark: var(--cb-theme-panel, #1f1f1f);
    --cb-polish-panel-2-dark: var(--cb-theme-panel-hover, #282828);
    --cb-polish-control-dark: var(--cb-theme-control, #303134);
    --cb-polish-control-hover-dark: var(--cb-theme-control-hover, #3c4043);
    --cb-polish-line-dark: var(--cb-theme-line, rgba(232, 234, 237, .10));
    --cb-polish-line-strong-dark: var(--cb-theme-line-strong, rgba(232, 234, 237, .18));
    --cb-polish-text-dark: var(--cb-theme-text, #e8eaed);
    --cb-polish-muted-dark: var(--cb-theme-muted, #a7adb5);
    --cb-polish-faint-dark: var(--cb-theme-faint, #7e858d);
    --cb-polish-accent-dark: var(--cb-theme-accent, #8ab4f8);
    --cb-polish-accent-text-dark: #0b0b0b;
}

html:is(
    .combeat-page-index,
    .combeat-page-ai-studio,
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-inspiration,
    .combeat-page-payment,
    .combeat-page-account,
    .combeat-page-admin,
    .combeat-page-api-settings,
    .combeat-page-login,
    .combeat-page-admin-login,
    .combeat-page-canvas,
    .combeat-page-legal
) {
    --cb-app-bg: var(--cb-polish-bg-light);
    --cb-app-panel: var(--cb-polish-panel-light);
    --cb-app-panel-2: var(--cb-polish-panel-2-light);
    --cb-app-control: var(--cb-polish-control-light);
    --cb-app-control-hover: var(--cb-polish-control-hover-light);
    --cb-app-line: var(--cb-polish-line-light);
    --cb-app-line-strong: var(--cb-polish-line-strong-light);
    --cb-app-text: var(--cb-polish-text-light);
    --cb-app-muted: var(--cb-polish-muted-light);
    --cb-app-faint: var(--cb-polish-faint-light);
    --cb-app-accent: var(--cb-polish-accent-light);
    --cb-app-accent-text: var(--cb-polish-accent-text-light);
    --bg: var(--cb-app-bg) !important;
    --page: var(--cb-app-bg) !important;
    --stage: var(--cb-app-bg) !important;
    --panel: var(--cb-app-panel) !important;
    --panel-strong: var(--cb-app-panel) !important;
    --panel-soft: var(--cb-app-control) !important;
    --card: var(--cb-app-panel) !important;
    --card-soft: var(--cb-app-control) !important;
    --soft: var(--cb-app-control) !important;
    --soft-2: var(--cb-app-control-hover) !important;
    --line: var(--cb-app-line) !important;
    --line-strong: var(--cb-app-line-strong) !important;
    --text: var(--cb-app-text) !important;
    --muted: var(--cb-app-muted) !important;
    --faint: var(--cb-app-faint) !important;
    --accent: var(--cb-app-accent) !important;
    --accent-text: var(--cb-app-accent-text) !important;
    color-scheme: light;
}

html.studio-theme-dark:is(
    .combeat-page-index,
    .combeat-page-ai-studio,
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-inspiration,
    .combeat-page-payment,
    .combeat-page-account,
    .combeat-page-admin,
    .combeat-page-api-settings,
    .combeat-page-login,
    .combeat-page-admin-login,
    .combeat-page-canvas,
    .combeat-page-legal
) {
    --cb-app-bg: var(--cb-polish-bg-dark);
    --cb-app-panel: var(--cb-polish-panel-dark);
    --cb-app-panel-2: var(--cb-polish-panel-2-dark);
    --cb-app-control: var(--cb-polish-control-dark);
    --cb-app-control-hover: var(--cb-polish-control-hover-dark);
    --cb-app-line: var(--cb-polish-line-dark);
    --cb-app-line-strong: var(--cb-polish-line-strong-dark);
    --cb-app-text: var(--cb-polish-text-dark);
    --cb-app-muted: var(--cb-polish-muted-dark);
    --cb-app-faint: var(--cb-polish-faint-dark);
    --cb-app-accent: var(--cb-polish-accent-dark);
    --cb-app-accent-text: var(--cb-polish-accent-text-dark);
    color-scheme: dark;
}

html:is(
    .combeat-page-index,
    .combeat-page-ai-studio,
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-inspiration,
    .combeat-page-payment,
    .combeat-page-account,
    .combeat-page-admin,
    .combeat-page-api-settings,
    .combeat-page-login,
    .combeat-page-admin-login,
    .combeat-page-canvas,
    .combeat-page-legal
),
html:is(
    .combeat-page-index,
    .combeat-page-ai-studio,
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-inspiration,
    .combeat-page-payment,
    .combeat-page-account,
    .combeat-page-admin,
    .combeat-page-api-settings,
    .combeat-page-login,
    .combeat-page-admin-login,
    .combeat-page-canvas,
    .combeat-page-legal
) body {
    background: var(--cb-app-bg) !important;
    background-image: none !important;
    color: var(--cb-app-text) !important;
}

html:is(
    .combeat-page-index,
    .combeat-page-ai-studio,
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-inspiration,
    .combeat-page-payment,
    .combeat-page-account,
    .combeat-page-admin,
    .combeat-page-api-settings,
    .combeat-page-login,
    .combeat-page-admin-login,
    .combeat-page-canvas,
    .combeat-page-legal
) :is(
    .shell,
    .app-shell,
    .stage,
    .page,
    .wrap,
    .main,
    .content,
    .studio-shell,
    .dialogue-stage,
    .result-list,
    .board,
    main,
    section
) {
    background-color: var(--cb-app-bg) !important;
    color: var(--cb-app-text) !important;
}

html:is(
    .combeat-page-index,
    .combeat-page-ai-studio,
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-inspiration,
    .combeat-page-payment,
    .combeat-page-account,
    .combeat-page-admin,
    .combeat-page-api-settings,
    .combeat-page-login,
    .combeat-page-admin-login,
    .combeat-page-canvas,
    .combeat-page-legal
) :is(
    .sidebar,
    .topbar,
    .card,
    .panel,
    .tool-card,
    .plan,
    .metric,
    .finance-card,
    .account-chip,
    .billing-tabs,
    .table-wrap,
    .record-card,
    .notice-card,
    .auth-card,
    .modal-card,
    .site-info-dialog,
    .history-pop,
    .history-popover,
    .history-item,
    .form,
    .model-panel,
    .gate-panel,
    .library,
    .canvas-nav,
    .ad-wrap,
    .invite-link,
    .composer,
    .composer-card,
    .composer-top,
    .param-card,
    .param-fields,
    .result-card,
    .loading-card,
    .empty-state,
    .composer-tool-menu,
    .model-menu,
    .mode-menu,
    .studio-main,
    .studio-side,
    .upload-tile,
    .select-wrap,
    .node,
    .block,
    .picker-modal,
    .profile-mini,
    .level-card,
    .invite-bound-box,
    .qr,
    .route-step,
    .intercept-rule,
    .pay-config-card,
    .dashboard-mini-card,
    .dashboard-panel-card,
    .studio-admin-card,
    .site-mini,
    details
) {
    background: var(--cb-app-panel) !important;
    background-image: none !important;
    border-color: var(--cb-app-line) !important;
    color: var(--cb-app-text) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html:is(
    .combeat-page-index,
    .combeat-page-ai-studio,
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-inspiration,
    .combeat-page-payment,
    .combeat-page-account,
    .combeat-page-admin,
    .combeat-page-api-settings,
    .combeat-page-login,
    .combeat-page-admin-login,
    .combeat-page-canvas,
    .combeat-page-legal
) :is(
    input,
    textarea,
    select,
    button,
    .input,
    .select,
    .textarea,
    .search input,
    .ghost-btn,
    .btn,
    .primary-btn,
    .open-btn,
    .generate-btn,
    .nav-btn,
    .nav-item,
    .tab-btn,
    .billing-tab,
    .side-btn,
    .side-pill,
    .copy-btn,
    .replicate-btn,
    .circle-tool,
    .mode-menu-btn,
    .model-menu-btn,
    .param-toggle,
    .seg button,
    .pill,
    .record-tab,
    .mode-btn,
    .field-frame,
    .key-btn,
    .provider-card,
    .icon-btn,
    .picker-cat-tab,
    .picker-cat-action
) {
    background-color: var(--cb-app-control) !important;
    background-image: none !important;
    border-color: var(--cb-app-line) !important;
    color: var(--cb-app-text) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html:is(
    .combeat-page-index,
    .combeat-page-ai-studio,
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-inspiration,
    .combeat-page-payment,
    .combeat-page-account,
    .combeat-page-admin,
    .combeat-page-api-settings,
    .combeat-page-login,
    .combeat-page-admin-login,
    .combeat-page-canvas,
    .combeat-page-legal
) :is(
    h1,
    h2,
    h3,
    h4,
    strong,
    .title,
    .top-title h1,
    .section-head h2,
    .tool-head h2,
    .page-hero h1,
    .page-kicker h1,
    .studio-title h1,
    .empty-state strong,
    .side-head h2,
    .card-title,
    .plan-name,
    .price b,
    .metric .value,
    .level-card-name,
    .brand-name,
    .modal-title,
    .editor-title,
    .content-head .editor-title,
    .picker-title,
    .label,
    td,
    summary
) {
    color: var(--cb-app-text) !important;
}

html:is(
    .combeat-page-index,
    .combeat-page-ai-studio,
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-inspiration,
    .combeat-page-payment,
    .combeat-page-account,
    .combeat-page-admin,
    .combeat-page-api-settings,
    .combeat-page-login,
    .combeat-page-admin-login,
    .combeat-page-canvas,
    .combeat-page-legal
) :is(
    p,
    small,
    th,
    .muted,
    .hint,
    .faint,
    .note,
    .meta,
    .result-meta,
    .field-note,
    .field .hint,
    .section-head p,
    .top-title p,
    .tool-head p,
    .page-hero p,
    .page-kicker p,
    .studio-title p,
    .empty-state p,
    .side-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,
    .model-menu small,
    .model-menu-note,
    .composer-menu-footer,
    .history-item small,
    .notice,
    .subtitle,
    .sub,
    .status,
    .side-section-title,
    .provider-meta,
    .block-title,
    .block-desc,
    .brand-sub,
    .nav-group-title
) {
    color: var(--cb-app-muted) !important;
}

html:is(
    .combeat-page-index,
    .combeat-page-ai-studio,
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-inspiration,
    .combeat-page-payment,
    .combeat-page-account,
    .combeat-page-admin,
    .combeat-page-api-settings,
    .combeat-page-login,
    .combeat-page-admin-login,
    .combeat-page-canvas,
    .combeat-page-legal
) :is(
    .primary-btn,
    .btn.primary,
    .open-btn,
    .generate-btn,
    .billing-tab.active,
    .nav-btn.active,
    .nav-item.active,
    .tab-btn.active,
    .seg button.active,
    .record-tab.active,
    .mode-btn.active,
    .provider-card.active,
    .picker-cat-action.active,
    #generateBtn
) {
    background: var(--cb-app-accent) !important;
    background-image: none !important;
    border-color: var(--cb-app-accent) !important;
    color: var(--cb-app-accent-text) !important;
    box-shadow: none !important;
}

html:is(
    .combeat-page-index,
    .combeat-page-ai-studio,
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-inspiration,
    .combeat-page-payment,
    .combeat-page-account,
    .combeat-page-admin,
    .combeat-page-api-settings,
    .combeat-page-login,
    .combeat-page-admin-login,
    .combeat-page-canvas,
    .combeat-page-legal
) :is(
    button,
    .btn,
    .ghost-btn,
    .nav-btn,
    .nav-item,
    .tab-btn,
    .billing-tab,
    .copy-btn,
    .replicate-btn,
    .circle-tool,
    .mode-menu-btn,
    .model-menu-btn,
    .side-btn,
    .side-pill,
    .provider-card,
    .icon-btn
):hover {
    background: var(--cb-app-control-hover) !important;
    border-color: var(--cb-app-line-strong) !important;
    color: var(--cb-app-text) !important;
    transform: none !important;
}

html:is(
    .combeat-page-index,
    .combeat-page-ai-studio,
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-inspiration,
    .combeat-page-payment,
    .combeat-page-account,
    .combeat-page-admin,
    .combeat-page-api-settings,
    .combeat-page-login,
    .combeat-page-admin-login,
    .combeat-page-canvas,
    .combeat-page-legal
) :is(input, textarea, .input, .textarea, .search input)::placeholder {
    color: var(--cb-app-faint) !important;
    opacity: 1 !important;
}

html:is(
    .combeat-page-index,
    .combeat-page-ai-studio,
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-inspiration,
    .combeat-page-payment,
    .combeat-page-account,
    .combeat-page-admin,
    .combeat-page-api-settings,
    .combeat-page-login,
    .combeat-page-admin-login,
    .combeat-page-canvas,
    .combeat-page-legal
) :is(th, td) {
    border-bottom-color: var(--cb-app-line) !important;
}

html:is(
    .combeat-page-index,
    .combeat-page-ai-studio,
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-inspiration,
    .combeat-page-payment,
    .combeat-page-account,
    .combeat-page-admin,
    .combeat-page-api-settings,
    .combeat-page-login,
    .combeat-page-admin-login,
    .combeat-page-canvas,
    .combeat-page-legal
) th {
    background: var(--cb-app-panel-2) !important;
    color: var(--cb-app-muted) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

html:is(
    .combeat-page-index,
    .combeat-page-ai-studio,
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-inspiration,
    .combeat-page-payment,
    .combeat-page-account,
    .combeat-page-admin,
    .combeat-page-api-settings,
    .combeat-page-login,
    .combeat-page-admin-login,
    .combeat-page-canvas,
    .combeat-page-legal
) tr:hover td {
    background: var(--cb-app-panel-2) !important;
}

html:not(.studio-theme-dark).combeat-page-payment :is(.account-strip, .account-item, .account-item strong) {
    color: var(--cb-app-text) !important;
}

html:not(.studio-theme-dark).combeat-page-payment .plan {
    background: var(--cb-app-panel) !important;
    border-color: var(--cb-app-line) !important;
    color: var(--cb-app-text) !important;
}

html:not(.studio-theme-dark).combeat-page-payment :is(.discount, .quota, .invite-link, .tool-card) {
    background: var(--cb-app-panel-2) !important;
    border-color: var(--cb-app-line) !important;
    color: var(--cb-app-text) !important;
}

html:not(.studio-theme-dark).combeat-page-account.combeat-page-account :is(
    .shell,
    .main,
    .content,
    .panel,
    .panel.active,
    .topbar
),
html:not(.studio-theme-dark).combeat-page-admin.admin-flat-fixed :is(
    .shell,
    .main,
    .content,
    .panel,
    .panel.active,
    .topbar
) {
    background: var(--cb-app-bg) !important;
    background-color: var(--cb-app-bg) !important;
    color: var(--cb-app-text) !important;
}

html:not(.studio-theme-dark).combeat-page-account.combeat-page-account :is(
    #metrics > .metric,
    .account-data-panel,
    #panel-profile > .card,
    #panel-password > .card,
    #panel-redeem > .card,
    #panel-inspirationPublished .two-col > .card,
    .levels-policy-section,
    .table-wrap,
    .policy-table-wrap,
    .notice-card,
    .invite-bound-box,
    .record-card,
    .empty,
    .avatar-editor,
    .account-data-cell,
    #paymentMetrics > .metric,
    #inviteMetrics > .metric,
    #levelCards > .level-flat-item,
    .record-thumb,
    .notice-media,
    .invite-summary-card
),
html:not(.studio-theme-dark).combeat-page-admin.admin-flat-fixed :is(
    .admin-creator-sidebar,
    .panel > .card,
    .card,
    .metric,
    .dashboard-panel-card,
    .dashboard-mini-card,
    .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(--cb-app-panel) !important;
    background-color: var(--cb-app-panel) !important;
    border-color: var(--cb-app-line) !important;
    color: var(--cb-app-text) !important;
}

html:not(.studio-theme-dark).combeat-page-account.combeat-page-account :is(input, textarea, select, .input, .textarea),
html:not(.studio-theme-dark).combeat-page-admin.admin-flat-fixed :is(input, textarea, select, .input, .textarea, .select, .search input) {
    background: var(--cb-app-control) !important;
    background-color: var(--cb-app-control) !important;
    border-color: var(--cb-app-line) !important;
    color: var(--cb-app-text) !important;
}

html.combeat-page-ai-studio {
    --gemini-result-bg: var(--cb-app-bg) !important;
    --gemini-composer-bg: var(--cb-app-panel) !important;
}

html:not(.studio-theme-dark).combeat-page-ai-studio .prompt-input-shell {
    --prompt-feather-rgb: 255, 255, 255 !important;
}

html:not(.studio-theme-dark).combeat-page-ai-studio body.is-empty-stage::before,
html:not(.studio-theme-dark).combeat-page-ai-studio :is(.studio-shell, .dialogue-stage, .result-list) {
    background: var(--cb-app-bg) !important;
    background-image: none !important;
}

html:not(.studio-theme-dark).combeat-page-ai-studio :is(
    body.is-empty-stage #promptInput,
    body:not(.is-empty-stage) #promptInput,
    body.is-empty-stage .model-menu-btn,
    body:not(.is-empty-stage) .model-menu-btn,
    body.is-empty-stage #uploadBtn,
    body:not(.is-empty-stage) #uploadBtn,
    body.is-empty-stage #generateBtn,
    body:not(.is-empty-stage) #generateBtn
) {
    color: var(--cb-app-text) !important;
}

html:not(.studio-theme-dark).combeat-page-ai-studio :is(
    body.is-empty-stage #promptInput::placeholder,
    body:not(.is-empty-stage) #promptInput::placeholder
) {
    color: var(--cb-app-muted) !important;
}

html.combeat-page-inspiration .card-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
}

html.combeat-page-inspiration :is(.card-title, .card-prompt, .preview-description, .result-text, .message-text) {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
}

html:not(.studio-theme-dark).combeat-page-inspiration .page-kicker :is(h1, p) {
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
}

html.combeat-page-legal .card {
    width: 100%;
    max-width: 940px;
}

html.combeat-page-legal :is(p, h1, h2, .intro, .brand, .btn) {
    word-break: normal;
    overflow-wrap: anywhere;
}

html.combeat-page-legal .actions {
    align-items: center;
}

html:is(
    .combeat-page-index,
    .combeat-page-ai-studio,
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-inspiration,
    .combeat-page-payment,
    .combeat-page-account,
    .combeat-page-admin,
    .combeat-page-api-settings,
    .combeat-page-login,
    .combeat-page-admin-login,
    .combeat-page-canvas,
    .combeat-page-legal
) :is(
    .page,
    .wrap,
    .shell,
    .app-shell,
    .main,
    .content,
    .panel,
    .card,
    .toolbar,
    .section-head,
    .topbar,
    .field,
    .field-row,
    .field-grid,
    .form,
    .grid,
    .cards,
    .two-col,
    .layout,
    .model-grid,
    .record-list,
    .table-wrap,
    .composer-wrap,
    .composer-card,
    .result-card,
    .result-text
) {
    min-width: 0 !important;
}

html:is(
    .combeat-page-index,
    .combeat-page-ai-studio,
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-inspiration,
    .combeat-page-payment,
    .combeat-page-account,
    .combeat-page-admin,
    .combeat-page-api-settings,
    .combeat-page-login,
    .combeat-page-admin-login,
    .combeat-page-canvas,
    .combeat-page-legal
) :is(p, li, td, label, input, textarea, select, button, .btn, .nav-btn, .card, .record-card, .result-text, .message-text, .bubble-text, .note, .hint) {
    overflow-wrap: anywhere;
}

@media (max-width: 980px) {
    html:is(
        .combeat-page-index,
        .combeat-page-ai-studio,
        .combeat-page-online,
        .combeat-page-zimage,
        .combeat-page-enhance,
        .combeat-page-klein,
        .combeat-page-angle,
        .combeat-page-gpt-chat,
        .combeat-page-inspiration,
        .combeat-page-payment,
        .combeat-page-account,
        .combeat-page-admin,
        .combeat-page-api-settings,
        .combeat-page-login,
        .combeat-page-admin-login,
        .combeat-page-canvas,
        .combeat-page-legal
    ),
    html:is(
        .combeat-page-index,
        .combeat-page-ai-studio,
        .combeat-page-online,
        .combeat-page-zimage,
        .combeat-page-enhance,
        .combeat-page-klein,
        .combeat-page-angle,
        .combeat-page-gpt-chat,
        .combeat-page-inspiration,
        .combeat-page-payment,
        .combeat-page-account,
        .combeat-page-admin,
        .combeat-page-api-settings,
        .combeat-page-login,
        .combeat-page-admin-login,
        .combeat-page-canvas,
        .combeat-page-legal
    ) body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    html:is(
        .combeat-page-payment,
        .combeat-page-account,
        .combeat-page-admin,
        .combeat-page-api-settings,
        .combeat-page-login,
        .combeat-page-admin-login,
        .combeat-page-legal,
        .combeat-page-canvas
    ) :is(.page, .wrap, .shell, .main, .content) {
        width: 100% !important;
        max-width: 100% !important;
    }

    html:is(.combeat-page-account, .combeat-page-admin, .combeat-page-api-settings) :is(.shell, .layout) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html:is(.combeat-page-account, .combeat-page-admin, .combeat-page-api-settings) :is(.sidebar, .admin-creator-sidebar) {
        position: sticky !important;
        top: 0 !important;
        z-index: 50 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: 42vh !important;
        overflow: auto !important;
        border-right: 0 !important;
        border-bottom: 1px solid var(--cb-app-line) !important;
    }

    html.combeat-page-admin.admin-flat-fixed .main {
        width: 100% !important;
        margin-left: 0 !important;
        padding: 0 14px 36px !important;
    }

    html.combeat-page-account .main {
        min-height: 0 !important;
    }

    html:is(.combeat-page-account, .combeat-page-admin) :is(.nav, .history-list-shell, .provider-list, .record-tabs) {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding-bottom: 4px !important;
        scrollbar-width: none !important;
    }

    html:is(.combeat-page-account, .combeat-page-admin) :is(.nav, .history-list-shell, .provider-list, .record-tabs)::-webkit-scrollbar {
        display: none !important;
    }

    html:is(.combeat-page-account, .combeat-page-admin) :is(.nav-group, .history-record-item) {
        flex: 0 0 auto !important;
    }

    html:is(.combeat-page-account, .combeat-page-admin) :is(.nav-group-title, .sidebar-section-title, .history-record-meta, .brand-sub) {
        display: none !important;
    }

    html:is(.combeat-page-account, .combeat-page-admin) :is(.nav-btn, .nav-item, .history-record-btn) {
        width: auto !important;
        min-width: 46px !important;
        max-width: 168px !important;
        white-space: nowrap !important;
    }

    html:is(.combeat-page-payment, .combeat-page-account, .combeat-page-admin, .combeat-page-api-settings) :is(
        .cards,
        .cards.compact,
        .two-col,
        .field-grid,
        .field-row,
        .form,
        .model-grid,
        .dashboard-main,
        .dashboard-mini-grid,
        .pay-config-grid,
        .pay-admin-grid,
        .studio-admin-grid,
        .route-flow,
        .intercept-layout,
        .intercept-rule-grid,
        .tools,
        .plans,
        .account-data-layout,
        .account-data-grid,
        #metrics,
        #paymentMetrics,
        #inviteMetrics,
        #levelCards
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html:is(.combeat-page-payment, .combeat-page-account, .combeat-page-admin, .combeat-page-api-settings) :is(.topbar, .section-head, .content-head, .page-head, .toolbar, .tool-head) {
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    html:is(.combeat-page-payment, .combeat-page-account, .combeat-page-admin, .combeat-page-api-settings) :is(.section-actions, .content-actions, .top-actions, .toolbar .section-actions, .models-toolbar-actions) {
        width: 100% !important;
        justify-content: stretch !important;
    }

    html:is(.combeat-page-payment, .combeat-page-account, .combeat-page-admin, .combeat-page-api-settings) :is(.section-actions > *, .content-actions > *, .top-actions > *, .toolbar .section-actions > *, .models-toolbar-actions > *, .btn, .action-btn, .ghost-btn, .primary-btn) {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html:is(.combeat-page-payment, .combeat-page-account, .combeat-page-admin, .combeat-page-api-settings) :is(.table-wrap, .policy-table-wrap) {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    html:is(.combeat-page-payment, .combeat-page-account, .combeat-page-admin, .combeat-page-api-settings) table {
        min-width: 680px !important;
    }

    html.combeat-page-inspiration .topbar {
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    html.combeat-page-inspiration .page-kicker {
        max-width: 100% !important;
        position: static !important;
    }

    html.combeat-page-inspiration .search {
        width: 100% !important;
        flex: none !important;
    }
}

@media (max-width: 760px) {
    html.combeat-page-index.combeat-top-frame .app-shell {
        grid-template-columns: 64px minmax(0, 1fr) !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar {
        width: 64px !important;
        min-width: 64px !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar :is(.brand-text, .sidebar-history, .sidebar-section-title, .nav-item .label, .side-actions .label, .account-label, .account-row, .account-name, .account-credits, .account-free) {
        display: none !important;
    }

    html.combeat-page-ai-studio {
        --gemini-column-gutter: 20px !important;
        --gemini-composer-height: 72px !important;
        --gemini-composer-clearance: 126px !important;
        --gemini-composer-radius: 28px !important;
    }

    html.combeat-page-ai-studio .studio-shell {
        width: 100% !important;
        height: 100dvh !important;
        max-width: 100% !important;
        padding: 10px !important;
        overflow: hidden !important;
    }

    html.combeat-page-ai-studio body.is-empty-stage .composer-wrap,
    html.combeat-page-ai-studio body:not(.is-empty-stage) .composer-wrap {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
    }

    html.combeat-page-ai-studio body.is-empty-stage #promptInput,
    html.combeat-page-ai-studio body:not(.is-empty-stage) #promptInput {
        padding: 22px 132px 18px 52px !important;
        font-size: 15px !important;
        line-height: 1.35 !important;
    }

    html.combeat-page-ai-studio .prompt-input-shell {
        --prompt-feather-left: 52px !important;
        --prompt-feather-right: 132px !important;
        --prompt-feather-x: 18px !important;
    }

    html.combeat-page-ai-studio body.is-empty-stage .composer-actions,
    html.combeat-page-ai-studio body:not(.is-empty-stage) .composer-actions {
        left: 10px !important;
        right: 10px !important;
        bottom: 14px !important;
        height: 40px !important;
        display: grid !important;
        grid-template-columns: 38px minmax(0, 1fr) 38px !important;
        gap: 4px !important;
        overflow: hidden !important;
    }

    html.combeat-page-ai-studio .composer-actions :is(#uploadBtn, #generateBtn) span {
        display: none !important;
    }

    html.combeat-page-ai-studio .composer-actions :is(#uploadBtn, #generateBtn) {
        width: 38px !important;
        min-width: 38px !important;
        padding: 0 !important;
    }

    html.combeat-page-ai-studio .model-menu-btn {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    html.combeat-page-ai-studio .model-menu-btn span {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html:is(.combeat-page-account, .combeat-page-admin) .brand {
        min-height: 40px !important;
        padding: 4px !important;
    }

    html:is(.combeat-page-account, .combeat-page-admin) :is(.profile-mini, .admin-side-status) {
        display: none !important;
    }

    html.combeat-page-account .content,
    html.combeat-page-admin.admin-flat-fixed .content,
    html.combeat-page-api-settings .page {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    html.combeat-page-payment .page {
        width: min(100% - 20px, 1320px) !important;
        padding-top: 16px !important;
    }

    html.combeat-page-payment .account-strip {
        justify-content: flex-start !important;
        color: var(--cb-app-text) !important;
    }

    html.combeat-page-payment .billing-tabs {
        width: 100% !important;
    }

    html.combeat-page-payment .plan,
    html.combeat-page-payment .tool-card {
        min-height: 0 !important;
    }

    html.combeat-page-payment .field-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html.combeat-page-payment :is(.input, .ghost-btn, .primary-btn) {
        width: 100% !important;
    }

    html.combeat-page-inspiration .shell {
        padding: 12px !important;
    }

    html.combeat-page-inspiration .ad-wrap {
        height: clamp(150px, 52vw, 260px) !important;
    }

    html.combeat-page-inspiration .card-body {
        min-height: 62px !important;
        padding: 8px !important;
    }

    html.combeat-page-inspiration .card-actions {
        gap: 4px !important;
    }

    html.combeat-page-inspiration .card-actions .card-action-btn,
    html.combeat-page-inspiration .preview-actions .preview-action-btn {
        width: 28px !important;
        min-width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
        flex-basis: 28px !important;
    }

    html.combeat-page-legal .page {
        width: min(100% - 20px, 940px) !important;
        padding: 16px 0 !important;
        align-content: start !important;
    }

    html.combeat-page-legal .card {
        border-radius: 14px !important;
        padding: 20px !important;
    }

    html.combeat-page-legal .actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html.combeat-page-legal .btn {
        width: 100% !important;
    }
}

/* Light mode readability v6:
   keep all non-home screens readable on pale surfaces. */
html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) {
    --cb-app-text-strong: #1f2328;
    --cb-app-text-readable: #2f343b;
    --cb-app-icon-readable: #3f4650;
    --cb-app-muted-readable: #646b75;
    --cb-app-disabled-readable: #9aa2ad;
}

html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body {
    color: var(--cb-app-text-strong) !important;
}

html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    summary,
    label,
    .label,
    .title,
    .card-title,
    .section-title,
    .page-title,
    .panel-title,
    .block-title,
    .item-title,
    .option-title,
    .menu-title,
    .nav-label,
    .brand-name,
    .account-panel-title,
    .metric .value,
    .plan-name,
    .history-record-title,
    .sidebar-settings-title,
    .account-popover-title,
    .mobile-account-title,
    .node-title,
    .setting-title,
    .canvas-context-head,
    .current-canvas-title,
    .canvas-nav,
    .mode-btn span,
    .composer-title,
    .result-title,
    .block-head,
    .api-title,
    .form-title
) {
    color: var(--cb-app-text-strong) !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body :is(
    p,
    small,
    .muted,
    .hint,
    .faint,
    .note,
    .meta,
    .subtitle,
    .sub,
    .status,
    .description,
    .desc,
    .block-desc,
    .field-note,
    .field .hint,
    .section-head p,
    .top-title p,
    .tool-head p,
    .page-hero p,
    .page-kicker p,
    .studio-title p,
    .empty-state p,
    .side-head p,
    .price-note,
    .quota span,
    .benefit-list small,
    .card-prompt,
    .metric .label,
    .metric .hint,
    .level-card-hint,
    .level-benefits li,
    .record-note,
    .model-menu small,
    .model-menu-note,
    .composer-menu-footer,
    .history-item small,
    .history-record-meta,
    .canvas-chat-meta,
    .canvas-chat-empty,
    .canvas-continue-status,
    .current-canvas-time,
    .gen-count-label,
    .model-panel-sub,
    .image-edit-sub,
    .canvas-context-refresh,
    .canvas-context-collapse,
    .notice
) {
    color: var(--cb-app-muted-readable) !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body :is(
    button,
    .btn,
    .button,
    .icon-btn,
    .tool-btn,
    .side-btn,
    .nav-item,
    .menu-item,
    .option,
    .chip,
    .tab,
    .pill,
    .select-lite,
    .model-select,
    .provider-select,
    .size-select,
    .setting-input,
    .model-input,
    .sidebar-settings-item,
    .account-popover-item,
    .mobile-account-item,
    .history-record-btn,
    .canvas-context-refresh,
    .canvas-context-collapse,
    .canvas-tool-btn,
    .toolbar-btn,
    .bottom-toolbar button,
    .canvas-bottom-toolbar button,
    .mode-btn,
    .plan,
    .open-btn
) {
    color: var(--cb-app-text-readable) !important;
    text-shadow: none !important;
}

html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body :is(
    i,
    svg,
    .icon,
    .lucide,
    [data-lucide]
) {
    color: var(--cb-app-icon-readable) !important;
    opacity: 1 !important;
}

html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body :is(
    svg path,
    svg rect,
    svg circle,
    svg ellipse,
    svg polygon,
    svg line,
    svg polyline
) {
    stroke: currentColor;
}

html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body :is(
    button:disabled,
    .btn:disabled,
    .button:disabled,
    .icon-btn:disabled,
    .tool-btn:disabled,
    .sidebar-settings-item[aria-disabled="true"],
    .account-popover-item[aria-disabled="true"],
    .is-disabled,
    .disabled
) {
    color: var(--cb-app-disabled-readable) !important;
    opacity: .78 !important;
}

html:not(.studio-theme-dark).combeat-page-index.combeat-top-frame body .sidebar :is(
    .nav-item,
    .nav-item .label,
    .side-btn,
    .side-btn .label,
    .history-record-btn,
    .history-record-title,
    .sidebar-settings-item,
    .sidebar-settings-item .label,
    .account-popover-item,
    .account-popover-item .label,
    .mobile-account-item,
    .mobile-account-item .label
) {
    color: var(--cb-app-text-strong) !important;
    opacity: 1 !important;
}

html:not(.studio-theme-dark).combeat-page-index.combeat-top-frame body .sidebar :is(
    .nav-item i,
    .nav-item svg,
    .side-btn i,
    .side-btn svg,
    .history-record-btn > svg,
    .sidebar-settings-item i,
    .sidebar-settings-item svg,
    .account-popover-item i,
    .account-popover-item svg,
    .mobile-account-item i,
    .mobile-account-item svg
) {
    color: var(--cb-app-icon-readable) !important;
    opacity: 1 !important;
}

html:not(.studio-theme-dark).combeat-page-index.combeat-top-frame body .sidebar :is(
    .nav-item.active,
    .nav-item:hover,
    .side-btn:hover,
    .history-record-btn:hover,
    .sidebar-settings-item:hover,
    .account-popover-item:hover,
    .mobile-account-item:hover
) {
    background: var(--cb-app-control-hover) !important;
    background-color: var(--cb-app-control-hover) !important;
    background-image: none !important;
    color: var(--cb-app-text-strong) !important;
}

html:not(.studio-theme-dark).combeat-page-index.combeat-top-frame body .sidebar :is(
    .sidebar-settings-menu,
    .account-popover,
    .mobile-account-menu
) {
    background: var(--cb-app-panel) !important;
    background-color: var(--cb-app-panel) !important;
    background-image: none !important;
    border-color: var(--cb-app-line) !important;
    color: var(--cb-app-text-strong) !important;
    box-shadow: var(--cb-app-shadow-soft) !important;
}

html:not(.studio-theme-dark).combeat-page-canvas :is(
    .node-title,
    .setting-title,
    .canvas-context-head,
    .current-canvas-title,
    .canvas-nav,
    .canvas-context-refresh,
    .canvas-context-collapse
) {
    color: var(--cb-app-text-strong) !important;
    opacity: 1 !important;
}

html:not(.studio-theme-dark).combeat-page-canvas :is(
    .canvas-chat-meta,
    .canvas-chat-empty,
    .canvas-continue-status,
    .current-canvas-time,
    .hint,
    .gen-count-label,
    .model-panel-sub,
    .image-edit-sub
) {
    color: var(--cb-app-muted-readable) !important;
    opacity: 1 !important;
}

html:not(.studio-theme-dark).combeat-page-ai-studio :is(
    .mode-btn,
    .mode-btn span,
    .mode-btn small,
    .param-card,
    .field,
    .model-panel,
    .history-popover,
    .composer-card,
    .result-card
) {
    color: var(--cb-app-text-strong) !important;
}

html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body :is(
    .primary,
    .primary-btn,
    .accent,
    .accent-btn,
    .send-btn,
    .generate-btn,
    #generateBtn,
    #sendBtn,
    .canvas-continue-run,
    .canvas-chat-row.user .canvas-chat-message,
    .llm-bubble.user,
    .mode-btn.active,
    .plan.selected .open-btn
) {
    background: var(--cb-app-accent) !important;
    background-color: var(--cb-app-accent) !important;
    background-image: none !important;
    border-color: var(--cb-app-accent) !important;
    color: var(--cb-app-accent-text) !important;
    box-shadow: none !important;
}

html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body :is(
    .primary *,
    .primary-btn *,
    .accent *,
    .accent-btn *,
    .send-btn *,
    .generate-btn *,
    #generateBtn *,
    #sendBtn *,
    .canvas-continue-run *,
    .canvas-chat-row.user .canvas-chat-message *,
    .llm-bubble.user *,
    .mode-btn.active *,
    .plan.selected .open-btn *
) {
    color: var(--cb-app-accent-text) !important;
}

html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body :is(
    .primary svg,
    .primary-btn svg,
    .accent svg,
    .accent-btn svg,
    .send-btn svg,
    .generate-btn svg,
    #generateBtn svg,
    #sendBtn svg,
    .canvas-continue-run svg,
    .mode-btn.active svg,
    .plan.selected .open-btn svg
) {
    color: var(--cb-app-accent-text) !important;
}

/* Final app-page theme reset. The public home page does not load this file. */
html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) {
    --cb-app-bg: var(--cb-theme-bg) !important;
    --cb-app-sidebar: var(--cb-theme-sidebar) !important;
    --cb-app-surface: var(--cb-theme-surface) !important;
    --cb-app-panel: var(--cb-theme-panel) !important;
    --cb-app-panel-2: var(--cb-theme-panel-hover) !important;
    --cb-app-control: var(--cb-theme-control) !important;
    --cb-app-control-hover: var(--cb-theme-control-hover) !important;
    --cb-app-line: var(--cb-theme-line) !important;
    --cb-app-line-strong: var(--cb-theme-line-strong) !important;
    --cb-app-text: var(--cb-theme-text) !important;
    --cb-app-muted: var(--cb-theme-muted) !important;
    --cb-app-faint: var(--cb-theme-faint) !important;
    --cb-app-accent: var(--cb-theme-accent) !important;
    --cb-app-accent-hover: var(--cb-theme-accent-hover) !important;
    --cb-app-accent-soft: var(--cb-theme-accent-soft) !important;
    --cb-app-accent-soft-text: var(--cb-theme-accent-soft-text) !important;
    --cb-app-accent-text: var(--cb-theme-accent-text) !important;
    --cb-app-danger: var(--cb-theme-danger) !important;
    --cb-app-danger-soft: var(--cb-theme-danger-soft) !important;
    --cb-app-success: var(--cb-theme-success) !important;
    --cb-app-success-soft: var(--cb-theme-success-soft) !important;
    --bg: var(--cb-app-bg) !important;
    --page: var(--cb-app-bg) !important;
    --stage: var(--cb-app-bg) !important;
    --panel: var(--cb-app-panel) !important;
    --rail: var(--cb-app-sidebar) !important;
    --panel-strong: var(--cb-app-surface) !important;
    --panel-soft: var(--cb-app-panel-2) !important;
    --card: var(--cb-app-panel) !important;
    --card-soft: var(--cb-app-panel-2) !important;
    --soft: var(--cb-app-panel-2) !important;
    --soft-2: var(--cb-app-control-hover) !important;
    --control: var(--cb-app-control) !important;
    --control-strong: var(--cb-app-control-hover) !important;
    --line: var(--cb-app-line) !important;
    --line-strong: var(--cb-app-line-strong) !important;
    --text: var(--cb-app-text) !important;
    --muted: var(--cb-app-muted) !important;
    --faint: var(--cb-app-faint) !important;
    --accent: var(--cb-app-accent) !important;
    --accent-text: var(--cb-app-accent-text) !important;
    --cb-bg: var(--cb-app-bg) !important;
    --cb-rail: var(--cb-app-sidebar) !important;
    --cb-panel: var(--cb-app-panel) !important;
    --cb-panel-strong: var(--cb-app-surface) !important;
    --cb-panel-2: var(--cb-app-panel-2) !important;
    --cb-control: var(--cb-app-control) !important;
    --cb-control-hover: var(--cb-app-control-hover) !important;
    --cb-line: var(--cb-app-line) !important;
    --cb-line-strong: var(--cb-app-line-strong) !important;
    --cb-text: var(--cb-app-text) !important;
    --cb-muted: var(--cb-app-muted) !important;
    --account-bg: var(--cb-app-bg) !important;
    --account-panel: var(--cb-app-panel) !important;
    --account-panel-soft: var(--cb-app-panel-2) !important;
    --gemini-shell-bg: var(--cb-app-bg) !important;
    --gemini-sidebar: var(--cb-app-sidebar) !important;
    --gemini-sidebar-hover: var(--cb-app-control-hover) !important;
    --gemini-sidebar-active: var(--cb-app-control) !important;
    --gemini-bg: var(--cb-app-bg) !important;
    --gemini-surface: var(--cb-app-surface) !important;
    --gemini-surface-2: var(--cb-app-panel-2) !important;
    --gemini-hover: var(--cb-app-control-hover) !important;
    --gemini-text: var(--cb-app-text) !important;
    --gemini-muted: var(--cb-app-muted) !important;
    --gemini-line: var(--cb-app-line) !important;
    --gemini-result-bg: var(--cb-app-bg) !important;
    --gemini-composer-bg: var(--cb-app-surface) !important;
    --empty-hero-bg: var(--cb-app-bg) !important;
    color-scheme: light !important;
}

html[class*="combeat-page-"]:not(.combeat-page-home).studio-theme-dark {
    --cb-app-bg: var(--cb-theme-bg) !important;
    --cb-app-sidebar: var(--cb-theme-sidebar) !important;
    --cb-app-surface: var(--cb-theme-surface) !important;
    --cb-app-panel: var(--cb-theme-panel) !important;
    --cb-app-panel-2: var(--cb-theme-panel-hover) !important;
    --cb-app-control: var(--cb-theme-control) !important;
    --cb-app-control-hover: var(--cb-theme-control-hover) !important;
    --cb-app-line: var(--cb-theme-line) !important;
    --cb-app-line-strong: var(--cb-theme-line-strong) !important;
    --cb-app-text: var(--cb-theme-text) !important;
    --cb-app-muted: var(--cb-theme-muted) !important;
    --cb-app-faint: var(--cb-theme-faint) !important;
    --cb-app-accent: var(--cb-theme-accent) !important;
    --cb-app-accent-hover: var(--cb-theme-accent-hover) !important;
    --cb-app-accent-soft: var(--cb-theme-accent-soft) !important;
    --cb-app-accent-soft-text: var(--cb-theme-accent-soft-text) !important;
    --cb-app-accent-text: var(--cb-theme-accent-text) !important;
    --cb-app-danger: var(--cb-theme-danger) !important;
    --cb-app-danger-soft: var(--cb-theme-danger-soft) !important;
    --cb-app-success: var(--cb-theme-success) !important;
    --cb-app-success-soft: var(--cb-theme-success-soft) !important;
    --bg: var(--cb-app-bg) !important;
    --page: var(--cb-app-bg) !important;
    --stage: var(--cb-app-bg) !important;
    --rail: var(--cb-app-sidebar) !important;
    --panel: var(--cb-app-panel) !important;
    --panel-strong: var(--cb-app-surface) !important;
    --panel-soft: var(--cb-app-panel-2) !important;
    --card: var(--cb-app-panel) !important;
    --card-soft: var(--cb-app-panel-2) !important;
    --soft: var(--cb-app-panel-2) !important;
    --soft-2: var(--cb-app-control-hover) !important;
    --control: var(--cb-app-control) !important;
    --control-strong: var(--cb-app-control-hover) !important;
    --line: var(--cb-app-line) !important;
    --line-strong: var(--cb-app-line-strong) !important;
    --text: var(--cb-app-text) !important;
    --muted: var(--cb-app-muted) !important;
    --faint: var(--cb-app-faint) !important;
    --accent: var(--cb-app-accent) !important;
    --accent-text: var(--cb-app-accent-text) !important;
    --cb-bg: var(--cb-app-bg) !important;
    --cb-bg-deep: var(--cb-app-bg) !important;
    --cb-rail: var(--cb-app-sidebar) !important;
    --cb-panel: var(--cb-app-panel) !important;
    --cb-panel-strong: var(--cb-app-surface) !important;
    --cb-panel-2: var(--cb-app-panel-2) !important;
    --cb-panel-soft: var(--cb-app-control) !important;
    --cb-control: var(--cb-app-control) !important;
    --cb-control-hover: var(--cb-app-control-hover) !important;
    --cb-line: var(--cb-app-line) !important;
    --cb-line-strong: var(--cb-app-line-strong) !important;
    --cb-text: var(--cb-app-text) !important;
    --cb-muted: var(--cb-app-muted) !important;
    --cb-faint: var(--cb-app-faint) !important;
    --cb-blue: var(--cb-app-accent) !important;
    --cb-blue-2: var(--cb-app-accent-hover) !important;
    --account-bg: var(--cb-app-bg) !important;
    --account-panel: var(--cb-app-panel) !important;
    --account-panel-soft: var(--cb-app-panel-2) !important;
    --gemini-shell-bg: var(--cb-app-bg) !important;
    --gemini-sidebar: var(--cb-app-sidebar) !important;
    --gemini-sidebar-hover: var(--cb-app-control-hover) !important;
    --gemini-sidebar-active: var(--cb-app-control) !important;
    --gemini-bg: var(--cb-app-bg) !important;
    --gemini-surface: var(--cb-app-surface) !important;
    --gemini-surface-2: var(--cb-app-panel-2) !important;
    --gemini-hover: var(--cb-app-control-hover) !important;
    --gemini-text: var(--cb-app-text) !important;
    --gemini-muted: var(--cb-app-muted) !important;
    --gemini-line: var(--cb-app-line) !important;
    --gemini-result-bg: var(--cb-app-bg) !important;
    --gemini-composer-bg: var(--cb-app-surface) !important;
    --empty-hero-bg: var(--cb-app-bg) !important;
    color-scheme: dark !important;
}

html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark),
html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body,
html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) :is(.app-shell, .stage, .studio-shell, .dialogue-stage, .result-list, .shell, .main, .content, .page, .wrap) {
    background: var(--cb-app-bg) !important;
    background-color: var(--cb-app-bg) !important;
    background-image: none !important;
    color: var(--cb-app-text) !important;
}

html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body :is(
    .sidebar,
    .topbar,
    .card,
    .panel,
    .tool-card,
    .metric,
    .table-wrap,
    .policy-table-wrap,
    .record-card,
    .notice-card,
    .empty,
    .auth-card,
    .modal-card,
    .composer,
    .composer-card,
    .composer-top,
    .param-card,
    .param-fields,
    .result-card,
    .loading-card,
    .model-panel,
    .gate-panel,
    .library,
    .canvas-nav,
    .ad-wrap,
    .invite-link,
    .account-data-panel,
    .levels-policy-section,
    .invite-bound-box,
    .invite-summary-card,
    .profile-mini,
    .admin-creator-sidebar,
    .dashboard-mini-card,
    .dashboard-panel-card,
    .studio-admin-card,
    .route-step,
    .intercept-rule,
    .pay-config-card,
    details
) {
    background: var(--cb-app-panel) !important;
    background-color: var(--cb-app-panel) !important;
    background-image: none !important;
    border-color: var(--cb-app-line) !important;
    color: var(--cb-app-text) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body :is(
    input,
    textarea,
    select,
    button,
    .input,
    .textarea,
    .select,
    .search input,
    .btn,
    .ghost-btn,
    .primary-btn,
    .open-btn,
    .generate-btn,
    .nav-btn,
    .nav-item,
    .tab-btn,
    .billing-tab,
    .side-btn,
    .side-pill,
    .copy-btn,
    .replicate-btn,
    .circle-tool,
    .mode-menu-btn,
    .model-menu-btn,
    .param-toggle,
    .seg button,
    .pill,
    .record-tab,
    .mode-btn,
    .field-frame,
    .key-btn,
    .provider-card,
    .icon-btn,
    .account-data-cell,
    .level-flat-item
) {
    background: var(--cb-app-control) !important;
    background-color: var(--cb-app-control) !important;
    background-image: none !important;
    border-color: var(--cb-app-line) !important;
    color: var(--cb-app-text) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body :is(
    .sidebar,
    .side-panel,
    .mobile-account-menu,
    .sidebar-settings-menu,
    .account-popover,
    .auth-card,
    .modal-card,
    .site-info-dialog,
    .composer,
    .composer-card,
    .composer-top,
    .model-panel,
    .mode-menu,
    .model-menu,
    .composer-tool-menu,
    .picker-modal
) {
    background: var(--cb-app-surface) !important;
    background-color: var(--cb-app-surface) !important;
    border-color: var(--cb-app-line) !important;
    color: var(--cb-app-text) !important;
}

html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body :is(
    .primary-btn,
    .btn.primary,
    .generate-btn,
    .seg button.active,
    .record-tab.active,
    .mode-btn.active,
    .provider-card.active,
    .switch input:checked + span,
    .toggle.is-on
) {
    background: var(--cb-app-accent) !important;
    background-color: var(--cb-app-accent) !important;
    border-color: var(--cb-app-accent) !important;
    color: var(--cb-app-accent-text) !important;
}

html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body :is(
    .nav-btn.active,
    .nav-item.active,
    .side-btn.active,
    .pay-side-btn.active,
    .billing-tab.active,
    .tab-btn.active,
    .picker-cat-action.active
) {
    background: var(--cb-app-control) !important;
    background-color: var(--cb-app-control) !important;
    border-color: transparent !important;
    color: var(--cb-app-text) !important;
}

html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body :is(
    .upgrade-pill,
    .account-level-mark,
    .pill.ok,
    .badge.info,
    .status-pill
) {
    background: var(--cb-app-accent-soft) !important;
    background-color: var(--cb-app-accent-soft) !important;
    color: var(--cb-app-accent-soft-text) !important;
    border-color: transparent !important;
}

html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body :is(
    h1,
    h2,
    h3,
    h4,
    strong,
    td,
    summary,
    .title,
    .card-title,
    .page-kicker h1,
    .studio-title h1,
    .section-head h2,
    .tool-head h2,
    .account-panel-title,
    .metric .value,
    .brand-name,
    .label
) {
    color: var(--cb-app-text) !important;
    text-shadow: none !important;
}

html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body :is(
    p,
    small,
    th,
    .muted,
    .hint,
    .faint,
    .note,
    .meta,
    .subtitle,
    .sub,
    .status,
    .page-kicker p,
    .studio-title p,
    .section-head p,
    .tool-head p,
    .metric .label,
    .metric .hint,
    .card-prompt,
    .record-note,
    .nav-group-title,
    .brand-sub
) {
    color: var(--cb-app-muted) !important;
    text-shadow: none !important;
}

html:not(.studio-theme-dark).combeat-page-index.combeat-top-frame {
    --rail: var(--cb-app-bg) !important;
    --rail-hover: var(--cb-app-control-hover) !important;
    --stage: var(--cb-app-bg) !important;
    --gemini-shell-bg: var(--cb-app-bg) !important;
    --gemini-sidebar: var(--cb-app-panel) !important;
    --gemini-sidebar-hover: var(--cb-app-control-hover) !important;
    --gemini-sidebar-active: var(--cb-app-control) !important;
    --gemini-text: var(--cb-app-text) !important;
    --gemini-muted: var(--cb-app-muted) !important;
}

html:not(.studio-theme-dark).combeat-page-index.combeat-top-frame body .sidebar,
html:not(.studio-theme-dark).combeat-page-index.combeat-top-frame body .mobile-account-menu,
html:not(.studio-theme-dark).combeat-page-index.combeat-top-frame body .sidebar-settings-menu,
html:not(.studio-theme-dark).combeat-page-index.combeat-top-frame body .account-popover {
    background: var(--cb-app-panel) !important;
    background-color: var(--cb-app-panel) !important;
    border-color: var(--cb-app-line) !important;
    color: var(--cb-app-text) !important;
}

html:not(.studio-theme-dark).combeat-page-index.combeat-top-frame:not(.combeat-ai-studio-active) body .stage > iframe,
html:not(.studio-theme-dark).combeat-page-index.combeat-top-frame:not(.combeat-ai-studio-active) body iframe.active {
    background: var(--cb-app-bg) !important;
    background-color: var(--cb-app-bg) !important;
}

html:not(.studio-theme-dark).combeat-page-account.combeat-page-account body :is(
    #metrics.cards.compact > .card.metric,
    .account-data-panel,
    #panel-profile > .card,
    #panel-password > .card,
    #panel-redeem > .card,
    #panel-inspirationPublished .two-col > .card,
    .levels-policy-section,
    .table-wrap,
    .policy-table-wrap,
    .notice-card,
    .invite-bound-box,
    .record-card,
    .empty,
    .avatar-editor,
    .invite-summary-card
) {
    background: var(--cb-app-panel) !important;
    background-color: var(--cb-app-panel) !important;
    border-color: var(--cb-app-line) !important;
    color: var(--cb-app-text) !important;
}

html:not(.studio-theme-dark).combeat-page-account.combeat-page-account body :is(
    .account-data-cell,
    #paymentMetrics > .metric,
    #inviteMetrics > .metric,
    #levelCards.level-list > .level-flat-item,
    .record-thumb,
    .notice-media,
    input,
    textarea,
    select,
    .input,
    .textarea,
    th
) {
    background: var(--cb-app-control) !important;
    background-color: var(--cb-app-control) !important;
    border-color: var(--cb-app-line) !important;
    color: var(--cb-app-text) !important;
}

html:not(.studio-theme-dark).combeat-page-account.combeat-page-account body tr:hover td,
html:not(.studio-theme-dark).combeat-page-admin.admin-flat-fixed body tr:hover td {
    background: var(--cb-app-panel-2) !important;
    background-color: var(--cb-app-panel-2) !important;
}

html:not(.studio-theme-dark).combeat-page-inspiration body :is(.shell, .topbar, .page-kicker) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

html:not(.studio-theme-dark).combeat-page-inspiration body :is(.search, .search input, .card, .preview-card, .preview-panel, .modal-card) {
    background: var(--cb-app-panel) !important;
    background-color: var(--cb-app-panel) !important;
    border-color: var(--cb-app-line) !important;
    color: var(--cb-app-text) !important;
}

@media (max-width: 860px) {
    html[class*="combeat-page-"]:not(.combeat-page-home):not(.combeat-page-index),
    html[class*="combeat-page-"]:not(.combeat-page-home):not(.combeat-page-index) body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    html[class*="combeat-page-"]:not(.combeat-page-home):not(.combeat-page-index) body :is(
        .page,
        .wrap,
        .shell,
        .main,
        .content,
        .panel,
        .card,
        .topbar,
        .section-head,
        .tool-head,
        .toolbar,
        .form,
        .field,
        .field-row,
        .field-grid,
        .grid,
        .cards,
        .two-col,
        .layout
    ) {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html[class*="combeat-page-"]:not(.combeat-page-home):not(.combeat-page-index) body :is(
        .grid,
        .cards,
        .cards.compact,
        .two-col,
        .field-grid,
        .field-row,
        .model-grid,
        .plans,
        .tools,
        .dashboard-main,
        .dashboard-mini-grid,
        .pay-config-grid,
        .pay-admin-grid,
        .studio-admin-grid,
        .route-flow,
        .intercept-layout,
        .intercept-rule-grid,
        .account-data-layout,
        .account-data-grid
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html[class*="combeat-page-"]:not(.combeat-page-home):not(.combeat-page-index) body :is(.topbar, .section-head, .tool-head, .toolbar, .content-head, .page-head) {
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    html[class*="combeat-page-"]:not(.combeat-page-home):not(.combeat-page-index) body :is(.table-wrap, .policy-table-wrap) {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    html[class*="combeat-page-"]:not(.combeat-page-home):not(.combeat-page-index) body :is(button, .btn, .ghost-btn, .primary-btn, .open-btn, .generate-btn, input, textarea, select) {
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* Light mode final component standard: flat, readable, no gradients. */
html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) {
    --cb-app-button-bg: var(--cb-theme-button-bg) !important;
    --cb-app-button-hover: var(--cb-theme-button-hover) !important;
    --cb-app-button-active: var(--cb-theme-button-active) !important;
    --cb-app-option-bg: var(--cb-theme-option-bg) !important;
    --cb-app-option-hover: var(--cb-theme-option-hover) !important;
    --cb-app-toolbar-bg: var(--cb-theme-toolbar-bg) !important;
    --cb-app-input-bg: var(--cb-theme-input-bg) !important;
    --strong: var(--cb-app-accent) !important;
    --strong-text: var(--cb-app-accent-text) !important;
}

html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body *,
html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body *::before,
html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body *::after {
    text-shadow: none !important;
}

html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body :is(
    .primary-btn,
    .btn.primary,
    .generate-btn,
    .open-btn,
    #generateBtn,
    .gen-btn,
    .canvas-confirm-btn,
    .canvas-continue-run,
    .dash-message-btn,
    .top-quick-action
) {
    background: var(--cb-app-accent) !important;
    background-color: var(--cb-app-accent) !important;
    background-image: none !important;
    border-color: var(--cb-app-accent) !important;
    color: var(--cb-app-accent-text) !important;
    box-shadow: none !important;
}

html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body :is(
    button,
    .btn,
    .ghost-btn,
    .action-btn,
    .icon-btn,
    .tool-btn,
    .circle-tool,
    .nav-btn,
    .nav-item,
    .side-btn,
    .side-pill,
    .tab-btn,
    .record-tab,
    .billing-tab,
    .mode-btn,
    .model-menu-btn,
    .mode-menu-btn,
    .copy-btn,
    .replicate-btn,
    .canvas-minimap-btn,
    .account-popover-action,
    .sidebar-settings-item,
    .menu-btn,
    .node-retry-btn,
    .node-stop-btn
) {
    background: var(--cb-app-button-bg) !important;
    background-color: var(--cb-app-button-bg) !important;
    background-image: none !important;
    border-color: var(--cb-app-line) !important;
    color: var(--cb-app-text) !important;
    box-shadow: none !important;
}

html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body :is(
    button,
    .btn,
    .ghost-btn,
    .action-btn,
    .icon-btn,
    .tool-btn,
    .circle-tool,
    .nav-btn,
    .nav-item,
    .side-btn,
    .side-pill,
    .tab-btn,
    .record-tab,
    .billing-tab,
    .mode-btn,
    .model-menu-btn,
    .mode-menu-btn,
    .copy-btn,
    .replicate-btn,
    .canvas-minimap-btn,
    .account-popover-action,
    .sidebar-settings-item,
    .menu-btn
):hover {
    background: var(--cb-app-button-hover) !important;
    background-color: var(--cb-app-button-hover) !important;
    background-image: none !important;
    border-color: var(--cb-app-line-strong) !important;
    color: var(--cb-app-text) !important;
    transform: none !important;
}

html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body :is(
    .nav-btn.active,
    .nav-item.active,
    .side-btn.active,
    .tab-btn.active,
    .record-tab.active,
    .billing-tab.active,
    .mode-btn.active,
    .provider-card.active,
    .canvas-item.active,
    .theme-toggle.active
) {
    background: var(--cb-app-button-active) !important;
    background-color: var(--cb-app-button-active) !important;
    background-image: none !important;
    border-color: transparent !important;
    color: var(--cb-app-text) !important;
}

html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body :is(
    .card,
    .panel,
    .metric,
    .level-card,
    .record-card,
    .notice-card,
    .account-data-panel,
    .levels-policy-section,
    .invite-summary-card,
    .invite-bound-box,
    .node,
    .node::before,
    .canvas-context-card,
    .canvas-minimap,
    .create-menu,
    .emoji-picker,
    .model-panel,
    .composer-tool-menu,
    .account-popover,
    .mobile-account-menu,
    .sidebar-settings-menu
) {
    background: var(--cb-app-panel) !important;
    background-color: var(--cb-app-panel) !important;
    background-image: none !important;
    border-color: var(--cb-app-line) !important;
    color: var(--cb-app-text) !important;
    box-shadow: none !important;
}

html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body :is(
    input,
    textarea,
    select,
    .input,
    .textarea,
    .select,
    #promptInput,
    .prompt-node textarea,
    .canvas-continue-input,
    .llm-input-area
) {
    background: var(--cb-app-input-bg) !important;
    background-color: var(--cb-app-input-bg) !important;
    background-image: none !important;
    border-color: var(--cb-app-line) !important;
    color: var(--cb-app-text) !important;
    box-shadow: none !important;
}

html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body :is(input, textarea, #promptInput, .canvas-continue-input)::placeholder {
    color: var(--cb-app-muted) !important;
    opacity: 1 !important;
}

html:not(.studio-theme-dark).combeat-page-ai-studio {
    --gemini-result-bg: var(--cb-app-bg) !important;
    --gemini-composer-bg: var(--cb-app-surface) !important;
}

html:not(.studio-theme-dark).combeat-page-ai-studio body,
html:not(.studio-theme-dark).combeat-page-ai-studio body.is-empty-stage,
html:not(.studio-theme-dark).combeat-page-ai-studio :is(.studio-shell, .dialogue-stage, .result-list) {
    background: var(--cb-app-bg) !important;
    background-color: var(--cb-app-bg) !important;
    background-image: none !important;
    color: var(--cb-app-text) !important;
}

html:not(.studio-theme-dark).combeat-page-ai-studio .prompt-input-shell {
    --prompt-feather-rgb: 255, 255, 255 !important;
}

html:not(.studio-theme-dark).combeat-page-ai-studio :is(.composer-card, .composer-card::before) {
    background: var(--cb-app-surface) !important;
    background-color: var(--cb-app-surface) !important;
    background-image: none !important;
    border-color: var(--cb-app-line) !important;
}

html:not(.studio-theme-dark).combeat-page-ai-studio body.is-empty-stage :is(#promptInput, #uploadBtn, .model-menu-btn, #generateBtn),
html:not(.studio-theme-dark).combeat-page-ai-studio body:not(.is-empty-stage) :is(#promptInput, #uploadBtn, .model-menu-btn, #generateBtn) {
    color: var(--cb-app-text) !important;
}

html:not(.studio-theme-dark).combeat-page-canvas {
    --page: var(--cb-app-bg) !important;
    --bg: var(--cb-app-bg) !important;
    --grid: #eef2f7 !important;
    --panel: var(--cb-app-panel) !important;
    --card: var(--cb-app-panel) !important;
    --card-solid: var(--cb-app-surface) !important;
    --soft: var(--cb-app-control) !important;
    --soft-2: var(--cb-app-control-hover) !important;
    --line-2: var(--cb-app-line-strong) !important;
}

html:not(.studio-theme-dark).combeat-page-canvas body,
html:not(.studio-theme-dark).combeat-page-canvas :is(.shell, .board) {
    background-color: var(--cb-app-bg) !important;
    color: var(--cb-app-text) !important;
}

html:not(.studio-theme-dark).combeat-page-canvas :is(
    .gen-settings,
    .canvas-chat-list,
    .canvas-chat-message,
    .canvas-chat-row.user .canvas-chat-message,
    .canvas-chat-ref,
    .canvas-reference-strip,
    .canvas-ref-chip,
    .canvas-mention-menu,
    .canvas-mention-option,
    .canvas-continue-bubble::before,
    .canvas-minimap-map,
    .canvas-delete-box,
    .llm-chat-log,
    .llm-bubble,
    .node-head,
    .group-node .node-head,
    .promptGroup-node .node-head
) {
    background: var(--cb-app-panel) !important;
    background-color: var(--cb-app-panel) !important;
    background-image: none !important;
    border-color: var(--cb-app-line) !important;
    color: var(--cb-app-text) !important;
}

html:not(.studio-theme-dark).combeat-page-canvas :is(.toolbar, .canvas-bottom-toolbar, .bottom-toolbar, .tool-dock) {
    background: var(--cb-app-toolbar-bg) !important;
    background-color: var(--cb-app-toolbar-bg) !important;
    background-image: none !important;
    border-color: var(--cb-app-line) !important;
    box-shadow: none !important;
}

html:not(.studio-theme-dark).combeat-page-canvas :is(.canvas-chat-meta, .canvas-chat-empty, .hint, .node-title, .canvas-minimap-scale, .current-canvas-time) {
    color: var(--cb-app-muted) !important;
}

html:not(.studio-theme-dark).combeat-page-canvas :is(.canvas-continue-input, .canvas-continue-input::placeholder, .canvas-continue-run) {
    color: var(--cb-app-text) !important;
}

html:not(.studio-theme-dark).combeat-page-index.combeat-top-frame:not(.combeat-ai-studio-active) body :is(.stage, iframe, iframe.active) {
    background: var(--cb-app-bg) !important;
    background-color: var(--cb-app-bg) !important;
}

/* Final global component standard: flat, readable, no gradients. Keep home untouched. */
html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body :is(
    button,
    [role="button"],
    .btn,
    .glass-btn,
    .primary-btn,
    .open-btn,
    .generate-btn,
    .send-btn,
    .save-btn,
    .api-page-save-btn,
    .gen-btn,
    .gen-cascade-btn,
    .comfy-run,
    .llm-run,
    .model-btn,
    .image-edit-btn,
    .error-btn,
    .gate-icon-btn,
    .gate-back-link,
    .setting-check,
    .seg button,
    .mode-tabs button,
    .ms-model-tabs button,
    .llm-provider button,
    .theme-toggle,
    .canvas-minimap-btn,
    .canvas-continue-run,
    .top-quick-action
) {
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body :is(
    .btn,
    .glass-btn,
    .ghost-btn,
    .action-btn,
    .icon-btn,
    .tool-btn,
    .circle-tool,
    .nav-btn,
    .nav-item,
    .side-btn,
    .side-pill,
    .tab-btn,
    .record-tab,
    .billing-tab,
    .mode-btn,
    .model-menu-btn,
    .mode-menu-btn,
    .copy-btn,
    .replicate-btn,
    .canvas-minimap-btn,
    .account-popover-action,
    .sidebar-settings-item,
    .menu-btn,
    .model-btn.secondary,
    .image-edit-btn.secondary,
    .error-btn,
    .gate-icon-btn,
    .gate-back-link,
    .gen-step-btn,
    .llm-copy-btn,
    .llm-output-copy,
    .setting-check,
    .theme-toggle
) {
    background: var(--cb-app-button-bg) !important;
    border-color: var(--cb-app-line) !important;
    color: var(--cb-app-text) !important;
}

html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body :is(
    .primary-btn,
    .btn.primary,
    button.primary,
    .open-btn,
    .generate-btn,
    #generateBtn,
    .send-btn,
    .save-btn,
    .api-page-save-btn,
    .gen-btn,
    .gen-cascade-btn,
    .comfy-run,
    .llm-run,
    .model-btn.primary,
    .image-edit-btn.primary,
    .error-btn.primary,
    .canvas-confirm-btn,
    .canvas-continue-run,
    .dash-message-btn,
    .top-quick-action
) {
    background: var(--cb-app-accent) !important;
    border-color: var(--cb-app-accent) !important;
    color: var(--cb-app-accent-text) !important;
}

html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body :is(
    .btn,
    .glass-btn,
    .ghost-btn,
    .action-btn,
    .icon-btn,
    .tool-btn,
    .circle-tool,
    .nav-btn,
    .nav-item,
    .side-btn,
    .side-pill,
    .tab-btn,
    .record-tab,
    .billing-tab,
    .mode-btn,
    .model-menu-btn,
    .mode-menu-btn,
    .copy-btn,
    .replicate-btn,
    .canvas-minimap-btn,
    .account-popover-action,
    .sidebar-settings-item,
    .menu-btn,
    .model-btn.secondary,
    .image-edit-btn.secondary,
    .error-btn,
    .gate-icon-btn,
    .gate-back-link,
    .gen-step-btn,
    .llm-copy-btn,
    .llm-output-copy,
    .setting-check,
    .theme-toggle
):hover {
    background: var(--cb-app-button-hover) !important;
    border-color: var(--cb-app-line-strong) !important;
    color: var(--cb-app-text) !important;
    transform: none !important;
}

html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body :is(
    .nav-btn.active,
    .nav-item.active,
    .side-btn.active,
    .tab-btn.active,
    .record-tab.active,
    .billing-tab.active,
    .mode-btn.active,
    .provider-card.active,
    .canvas-item.active,
    .theme-toggle.active,
    .setting-check.active,
    .seg button.active,
    .mode-tabs button.active,
    .ms-model-tabs button.active,
    .llm-provider button.active,
    .image-edit-mode button.active
) {
    background: var(--cb-app-button-active) !important;
    border-color: var(--cb-app-line-strong) !important;
    color: var(--cb-app-text) !important;
}

html:not(.studio-theme-dark).combeat-page-canvas :is(
    .gen-settings,
    .comfy-settings,
    .generator-controls,
    .gen-run-row,
    .gen-count-row,
    .mode-tabs,
    .ms-model-tabs,
    .llm-provider,
    .free-model-head,
    .msgen-empty-state,
    .llm-mode,
    .llm-output,
    .llm-chat-log,
    .llm-input-area,
    .llm-system,
    .llm-chat-input,
    .model-panel,
    .model-row,
    .model-empty,
    .provider-editor,
    .image-edit-panel,
    .image-edit-mode,
    .image-edit-tools,
    .image-edit-stage,
    .gate-panel,
    .gate-create-row,
    .canvas-chat-list,
    .canvas-chat-message,
    .canvas-chat-ref,
    .canvas-reference-strip,
    .canvas-ref-chip,
    .canvas-mention-menu,
    .canvas-mention-option,
    .canvas-minimap-map,
    .canvas-delete-box
) {
    background: var(--cb-app-panel) !important;
    background-color: var(--cb-app-panel) !important;
    background-image: none !important;
    border-color: var(--cb-app-line) !important;
    color: var(--cb-app-text) !important;
    box-shadow: none !important;
}

html:not(.studio-theme-dark).combeat-page-canvas :is(
    .setting-input,
    .select-lite,
    .model-select,
    .compact-select,
    .gen-count-input,
    .model-input,
    .provider-field input,
    .provider-field select,
    .image-edit-tools input[type="number"],
    .image-edit-tools input[type="color"],
    .loop-field textarea,
    .loop-variable-editor,
    .canvas-range,
    input,
    textarea,
    select
) {
    background: var(--cb-app-input-bg) !important;
    background-color: var(--cb-app-input-bg) !important;
    background-image: none !important;
    border-color: var(--cb-app-line) !important;
    color: var(--cb-app-text) !important;
    box-shadow: none !important;
}

html:not(.studio-theme-dark).combeat-page-canvas :is(
    .canvas-chat-row.user .canvas-chat-message,
    .llm-bubble.user,
    .loop-token-chip,
    .grid-gap-value,
    .output-time-pill
) {
    background: var(--cb-app-accent) !important;
    border-color: var(--cb-app-accent) !important;
    color: var(--cb-app-accent-text) !important;
}

html:not(.studio-theme-dark).combeat-page-canvas .canvas-continue-bubble::before,
html:not(.studio-theme-dark).combeat-page-canvas .node::before {
    background-image: none !important;
    box-shadow: none !important;
}

html:not(.studio-theme-dark).combeat-page-canvas :is(
    .canvas-chat-meta,
    .canvas-chat-empty,
    .hint,
    .node-title,
    .setting-title,
    .gen-count-label,
    .model-panel-sub,
    .image-edit-sub,
    .provider-field span,
    .gate-subtitle,
    .llm-pane-label,
    .model-drag,
    .canvas-minimap-scale,
    .current-canvas-time
) {
    color: var(--cb-app-muted) !important;
}

html:not(.studio-theme-dark).combeat-page-canvas :is(
    .model-panel-title,
    .image-edit-title,
    .gate-title,
    .model-name,
    .free-model-head strong
) {
    color: var(--cb-app-text) !important;
}

@media (max-width: 768px) {
    html[class*="combeat-page-"]:not(.combeat-page-home) body :is(
        .gen-settings-row,
        .provider-grid,
        .model-add-row,
        .model-actions,
        .image-edit-actions,
        .gate-head,
        .gate-head-actions
    ) {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html:not(.studio-theme-dark).combeat-page-canvas :is(
        .gen-settings-row,
        .provider-inline,
        .image-edit-tools,
        .gate-head,
        .model-add-row
    ) {
        flex-wrap: wrap !important;
    }

    html:not(.studio-theme-dark).combeat-page-canvas :is(
        .gen-settings-row .field,
        .gen-settings-row .model-select,
        .gen-settings-row .ratio,
        .gen-settings-row .resolution,
        .provider-field,
        .model-input
    ) {
        flex: 1 1 140px !important;
        min-width: 0 !important;
    }
}

/* Light mode hardening v5: override late page-local dark blocks across non-home pages. */
html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body {
    color: var(--cb-app-text) !important;
    background-color: var(--cb-app-bg) !important;
}

html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body :is(
    .app,
    .shell,
    .stage,
    .main,
    .content,
    .page,
    .workspace,
    .studio-shell,
    .dialogue-stage,
    .chat-shell,
    .messages,
    .board,
    .canvas-gate
) {
    color: var(--cb-app-text) !important;
}

html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body :is(
    .card,
    .panel,
    .console-card,
    .nano-input,
    .upload-item,
    .result-frame,
    .masonry-item,
    .engine-panel,
    .tool-panel,
    .control-panel,
    .composer,
    .composer-card,
    .composer-body,
    .history-pop,
    .history-popover,
    .model-panel,
    .gate-panel,
    .plan,
    .pricing-card,
    .level-card,
    .record-card,
    .notice-card,
    .provider-card,
    .setting-row,
    .select-shell,
    .mode-switcher,
    .provider-switch,
    .engine-switch,
    .account-popover,
    .mobile-account-menu,
    .sidebar-settings-menu,
    .create-menu,
    .emoji-picker
) {
    background: var(--cb-app-panel) !important;
    background-color: var(--cb-app-panel) !important;
    background-image: none !important;
    border-color: var(--cb-app-line) !important;
    color: var(--cb-app-text) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body :is(
    .primary-btn,
    .btn.primary,
    button.primary,
    .btn-render,
    .glass-btn.primary,
    .generate-btn,
    #generateBtn,
    .send-btn,
    .open-btn,
    .save-btn,
    .api-page-save-btn,
    .publish-inspiration-btn,
    .gen-btn,
    .gen-cascade-btn,
    .comfy-run,
    .llm-run,
    .model-btn.primary,
    .image-edit-btn.primary,
    .preview-text-btn,
    .billing-tab.active,
    .nav-btn.active,
    .tab-btn.active,
    .side-btn.active,
    .mode-btn.active,
    .engine-btn.active,
    .model-option.active,
    .ratio-option.active,
    .resolution-option.active,
    .provider-btn.active,
    .canvas-confirm-btn,
    .canvas-continue-run
) {
    background: var(--cb-app-accent) !important;
    background-color: var(--cb-app-accent) !important;
    background-image: none !important;
    border-color: var(--cb-app-accent) !important;
    color: var(--cb-app-accent-text) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body :is(
    button,
    .btn,
    .glass-btn,
    .ghost-btn,
    .action-btn,
    .icon-btn,
    .tool-btn,
    .circle-tool,
    .nav-btn,
    .nav-item,
    .side-btn,
    .side-pill,
    .tab-btn,
    .record-tab,
    .billing-tab,
    .mode-btn,
    .engine-btn,
    .model-option,
    .ratio-option,
    .resolution-option,
    .provider-btn,
    .model-menu-btn,
    .mode-menu-btn,
    .copy-btn,
    .replicate-btn,
    .menu-btn,
    .model-btn.secondary,
    .image-edit-btn.secondary,
    .error-btn,
    .gate-icon-btn,
    .gate-back-link,
    .canvas-context-refresh,
    .canvas-context-collapse,
    .canvas-minimap-btn,
    .gen-step-btn,
    .llm-copy-btn,
    .llm-output-copy,
    .preview-icon-btn,
    .preview-text-btn.secondary,
    .setting-check,
    .account-popover-action,
    .sidebar-settings-item
) {
    background: var(--cb-app-button-bg) !important;
    background-color: var(--cb-app-button-bg) !important;
    background-image: none !important;
    border-color: var(--cb-app-line) !important;
    color: var(--cb-app-text) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body :is(
    input,
    textarea,
    select,
    .input,
    .textarea,
    .select,
    .provider-select,
    .size-select,
    .select-lite,
    .model-select,
    .setting-input,
    .model-input,
    .canvas-context-input,
    .canvas-continue-input,
    .llm-input-area,
    .llm-system,
    .llm-chat-input,
    #messageInput,
    #promptInput,
    #prompt
) {
    background: var(--cb-app-input-bg) !important;
    background-color: var(--cb-app-input-bg) !important;
    background-image: none !important;
    border-color: var(--cb-app-line) !important;
    color: var(--cb-app-text) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html[class*="combeat-page-"]:not(.combeat-page-home):not(.studio-theme-dark) body :is(
    input,
    textarea,
    #messageInput,
    #promptInput,
    #prompt,
    .canvas-continue-input,
    .llm-input-area
)::placeholder {
    color: var(--cb-app-muted) !important;
    opacity: 1 !important;
}

html:not(.studio-theme-dark).combeat-page-canvas .canvas-side-panel,
html:not(.studio-theme-dark).combeat-page-canvas .canvas-context-card,
html:not(.studio-theme-dark).combeat-page-canvas .canvas-context-head,
html:not(.studio-theme-dark).combeat-page-canvas .canvas-chat-list,
html:not(.studio-theme-dark).combeat-page-canvas .canvas-side-panel .canvas-continue-panel,
html:not(.studio-theme-dark).combeat-page-canvas .canvas-side-panel .canvas-continue-bubble,
html:not(.studio-theme-dark).combeat-page-canvas .canvas-mention-menu,
html:not(.studio-theme-dark).combeat-page-canvas .canvas-reference-strip,
html:not(.studio-theme-dark).combeat-page-canvas .canvas-ref-chip,
html:not(.studio-theme-dark).combeat-page-canvas .canvas-mention-option,
html:not(.studio-theme-dark).combeat-page-canvas .node,
html:not(.studio-theme-dark).combeat-page-canvas .node-head,
html:not(.studio-theme-dark).combeat-page-canvas .node-body,
html:not(.studio-theme-dark).combeat-page-canvas .loop-count-row,
html:not(.studio-theme-dark).combeat-page-canvas .gen-settings,
html:not(.studio-theme-dark).combeat-page-canvas .free-model-head,
html:not(.studio-theme-dark).combeat-page-canvas .loop-image-panel,
html:not(.studio-theme-dark).combeat-page-canvas .log-item,
html:not(.studio-theme-dark).combeat-page-canvas .log-field,
html:not(.studio-theme-dark).combeat-page-canvas .llm-chat-log,
html:not(.studio-theme-dark).combeat-page-canvas .llm-output,
html:not(.studio-theme-dark).combeat-page-canvas .model-panel,
html:not(.studio-theme-dark).combeat-page-canvas .image-edit-panel,
html:not(.studio-theme-dark).combeat-page-canvas .gate-panel {
    background: var(--cb-app-panel) !important;
    background-color: var(--cb-app-panel) !important;
    background-image: none !important;
    border-color: var(--cb-app-line) !important;
    color: var(--cb-app-text) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html:not(.studio-theme-dark).combeat-page-canvas .canvas-side-panel .canvas-continue-bubble {
    min-height: 104px !important;
    grid-template-columns: minmax(0, 1fr) 42px !important;
    align-items: end !important;
}

html:not(.studio-theme-dark).combeat-page-canvas .canvas-side-panel .canvas-continue-input {
    height: 82px !important;
    min-height: 82px !important;
    max-height: 82px !important;
    padding: 8px 4px !important;
    color: var(--cb-app-text) !important;
}

html:not(.studio-theme-dark).combeat-page-canvas .canvas-side-panel .canvas-continue-run,
html:not(.studio-theme-dark).combeat-page-canvas .canvas-side-panel.collapsed .canvas-continue-run {
    background: var(--cb-app-accent) !important;
    background-color: var(--cb-app-accent) !important;
    border-color: var(--cb-app-accent) !important;
    color: var(--cb-app-accent-text) !important;
}

html:not(.studio-theme-dark).combeat-page-canvas .canvas-side-panel.collapsed .canvas-context-card,
html:not(.studio-theme-dark).combeat-page-canvas .canvas-side-panel.collapsed .canvas-continue-panel,
html:not(.studio-theme-dark).combeat-page-canvas .canvas-side-panel.collapsed .canvas-continue-bubble {
    background: transparent !important;
    border-color: transparent !important;
}

html:not(.studio-theme-dark).combeat-page-canvas .canvas-chat-row.system .canvas-chat-message,
html:not(.studio-theme-dark).combeat-page-canvas .canvas-chat-row.assistant .canvas-chat-message,
html:not(.studio-theme-dark).combeat-page-canvas .llm-bubble.assistant {
    background: var(--cb-app-surface) !important;
    background-color: var(--cb-app-surface) !important;
    background-image: none !important;
    border-color: var(--cb-app-line) !important;
    color: var(--cb-app-text) !important;
}

html:not(.studio-theme-dark).combeat-page-canvas .canvas-chat-row.user .canvas-chat-message,
html:not(.studio-theme-dark).combeat-page-canvas .llm-bubble.user,
html:not(.studio-theme-dark).combeat-page-canvas .input-index,
html:not(.studio-theme-dark).combeat-page-canvas .loop-counter-token-btn,
html:not(.studio-theme-dark).combeat-page-canvas .loop-token-chip,
html:not(.studio-theme-dark).combeat-page-canvas .grid-gap-value,
html:not(.studio-theme-dark).combeat-page-canvas .output-time-pill {
    background: var(--cb-app-accent) !important;
    background-color: var(--cb-app-accent) !important;
    background-image: none !important;
    border-color: var(--cb-app-accent) !important;
    color: var(--cb-app-accent-text) !important;
    box-shadow: none !important;
}

html:not(.studio-theme-dark).combeat-page-canvas .canvas-chat-ref img,
html:not(.studio-theme-dark).combeat-page-canvas .canvas-chat-ref video,
html:not(.studio-theme-dark).combeat-page-canvas .canvas-mention-option img,
html:not(.studio-theme-dark).combeat-page-canvas .canvas-mention-option video,
html:not(.studio-theme-dark).combeat-page-canvas .output-preview video,
html:not(.studio-theme-dark).combeat-page-canvas .log-thumbs img,
html:not(.studio-theme-dark).combeat-page-canvas .log-thumbs video {
    background: var(--cb-app-surface) !important;
}

html:not(.studio-theme-dark).combeat-page-canvas .canvas-chat-list {
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

html:not(.studio-theme-dark).combeat-page-canvas .canvas-context-head,
html:not(.studio-theme-dark).combeat-page-canvas .canvas-chat-meta,
html:not(.studio-theme-dark).combeat-page-canvas .canvas-continue-status,
html:not(.studio-theme-dark).combeat-page-canvas .current-canvas-time,
html:not(.studio-theme-dark).combeat-page-canvas .node-title,
html:not(.studio-theme-dark).combeat-page-canvas .setting-title,
html:not(.studio-theme-dark).combeat-page-canvas .hint {
    color: var(--cb-app-muted) !important;
}

html:not(.studio-theme-dark).combeat-page-payment .plan,
html:not(.studio-theme-dark).combeat-page-payment .plan:hover,
html:not(.studio-theme-dark).combeat-page-payment .plan.selected {
    background: var(--cb-app-panel) !important;
    background-color: var(--cb-app-panel) !important;
    background-image: none !important;
    border-color: var(--cb-app-line) !important;
    color: var(--cb-app-text) !important;
    box-shadow: none !important;
}

html:not(.studio-theme-dark).combeat-page-payment .plan::before,
html:not(.studio-theme-dark).combeat-page-payment .plan::after,
html:not(.studio-theme-dark).combeat-page-payment .plan.selected::after,
html:not(.studio-theme-dark).combeat-page-ai-studio :is(.mode-btn, .composer-card)::before,
html:not(.studio-theme-dark).combeat-page-ai-studio :is(.mode-btn, .composer-card)::after {
    display: none !important;
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
}

html:not(.studio-theme-dark).combeat-page-ai-studio :is(
    .mode-btn,
    .param-card,
    .param-fields,
    .field,
    .model-panel,
    .history-popover,
    .composer-card,
    .composer-body,
    .result-card,
    .bubble.assistant
) {
    background: var(--cb-app-panel) !important;
    background-color: var(--cb-app-panel) !important;
    background-image: none !important;
    border-color: var(--cb-app-line) !important;
    color: var(--cb-app-text) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html:not(.studio-theme-dark).combeat-page-ai-studio :is(.mode-btn.active, .bubble.user) {
    background: var(--cb-app-accent) !important;
    background-color: var(--cb-app-accent) !important;
    background-image: none !important;
    border-color: var(--cb-app-accent) !important;
    color: var(--cb-app-accent-text) !important;
    box-shadow: none !important;
}

html:not(.studio-theme-dark):is(
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat
) body :is(.app, .shell, .workspace, .page, .tool-card, .engine-panel, .control-panel, .result-frame) {
    background: var(--cb-app-panel) !important;
    background-color: var(--cb-app-panel) !important;
    background-image: none !important;
    border-color: var(--cb-app-line) !important;
    color: var(--cb-app-text) !important;
    box-shadow: none !important;
}

@media (max-width: 760px) {
    html:not(.studio-theme-dark).combeat-page-canvas .canvas-side-panel {
        left: 12px !important;
        right: 12px !important;
        top: 82px !important;
        bottom: 92px !important;
        width: auto !important;
        max-width: calc(100vw - 24px) !important;
    }

    html:not(.studio-theme-dark).combeat-page-canvas .canvas-side-panel.collapsed {
        left: auto !important;
        right: 14px !important;
        top: auto !important;
        bottom: 92px !important;
        width: 44px !important;
        height: 44px !important;
    }

    html[class*="combeat-page-"]:not(.combeat-page-home) body :is(
        .plan,
        .card,
        .panel,
        .model-panel,
        .image-edit-panel,
        .gate-panel,
        .composer-card,
        .history-popover,
        .account-popover,
        .mobile-account-menu,
        .sidebar-settings-menu
    ) {
        max-width: calc(100vw - 24px) !important;
        box-sizing: border-box !important;
    }
}

/* Keep the AI Studio empty creation page on the fixed Gemini-style hero gradient. */
html.combeat-page-ai-studio {
    --cb-ai-empty-hero-bg-dark:
        radial-gradient(ellipse 86% 72% at 50% 63%, rgba(27, 40, 92, .92) 0%, rgba(20, 32, 78, .68) 34%, rgba(15, 20, 37, .34) 58%, rgba(15, 17, 23, 0) 78%),
        linear-gradient(180deg, #0b0b0b 0%, #0f1015 46%, #0b0b0b 100%);
    --cb-ai-empty-hero-bg-light:
        radial-gradient(ellipse 76% 64% at 50% 58%, rgba(187, 222, 248, .82) 0%, rgba(210, 234, 251, .58) 38%, rgba(239, 248, 255, .34) 62%, rgba(255, 255, 255, 0) 82%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 54%, #ffffff 100%);
    --cb-ai-empty-hero-bg: var(--cb-ai-empty-hero-bg-light);
}

html.combeat-page-ai-studio.studio-theme-dark {
    --cb-ai-empty-hero-bg: var(--cb-ai-empty-hero-bg-dark);
}

html.combeat-page-ai-studio body.is-empty-stage,
html.combeat-page-ai-studio body.is-empty-stage::before,
html.combeat-page-ai-studio body.is-empty-stage :is(.studio-shell, .dialogue-stage),
html.combeat-page-ai-studio .studio-shell:has(.result-list > .empty-state:only-child),
html.combeat-page-ai-studio .studio-shell:has(.result-list > .empty-state:only-child) .dialogue-stage {
    background: var(--cb-ai-empty-hero-bg) !important;
    background-color: transparent !important;
    background-image: var(--cb-ai-empty-hero-bg) !important;
}

html.combeat-page-ai-studio body.is-empty-stage .result-list,
html.combeat-page-ai-studio .studio-shell:has(.result-list > .empty-state:only-child) .result-list {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* AI Studio shell guard: keep the empty hero gradient and fill the embedded viewport. */
html.combeat-page-ai-studio,
html.combeat-page-ai-studio body,
html.combeat-page-ai-studio .studio-shell,
html.combeat-page-ai-studio .dialogue-stage,
html.combeat-page-ai-studio .result-list {
    min-width: 0 !important;
    max-width: none !important;
}

html.combeat-page-ai-studio,
html.combeat-page-ai-studio body {
    width: 100% !important;
    overflow-x: hidden !important;
}

html.combeat-page-ai-studio .studio-shell,
html.combeat-page-ai-studio .dialogue-stage {
    width: 100% !important;
}

html.combeat-page-ai-studio body.is-empty-stage,
html.combeat-page-ai-studio body.is-empty-stage::before,
html.combeat-page-ai-studio body.is-empty-stage :is(.studio-shell, .dialogue-stage),
html.combeat-page-ai-studio .studio-shell:has(.result-list > .empty-state:only-child),
html.combeat-page-ai-studio .studio-shell:has(.result-list > .empty-state:only-child) .dialogue-stage {
    background: var(--cb-ai-empty-hero-bg) !important;
    background-color: transparent !important;
    background-image: var(--cb-ai-empty-hero-bg) !important;
}

/* Canvas true EOF lock: placed after all page polish rules. */
html.combeat-page-canvas {
    --page: #080808 !important;
    --bg: #080808 !important;
    --canvas-dot-background: #080808 !important;
    --canvas-dot-color: rgba(255, 255, 255, .09) !important;
    --panel: #1f1f1f !important;
    --card: #1f1f1f !important;
    --card-solid: #242424 !important;
    --soft: #242424 !important;
    --soft-2: #303030 !important;
    --line: #303030 !important;
    --line-2: #444444 !important;
    --text: #e7e7e7 !important;
    --muted: #c6c6c6 !important;
    --faint: #8b8b8b !important;
    --cb-app-bg: #080808 !important;
    --cb-app-panel: #1f1f1f !important;
    --cb-app-surface: #242424 !important;
    --cb-app-toolbar-bg: rgba(31, 31, 31, .84) !important;
    --cb-app-button-bg: #242424 !important;
    --cb-app-button-hover: #303030 !important;
    --cb-app-line: #303030 !important;
    --cb-app-line-strong: #4a4a4a !important;
    --cb-app-text: #e7e7e7 !important;
    --cb-app-muted: #8b8b8b !important;
    color-scheme: dark;
}

html.combeat-page-canvas body,
html.combeat-page-canvas :is(.shell, .board, .canvas-gate) {
    background: #080808 !important;
    background-color: #080808 !important;
    color: #e7e7e7 !important;
}

html.combeat-page-canvas :is(.board, .canvas-gate)::before {
    background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px) !important;
    background-size: 24px 24px !important;
    background-position: center !important;
    mask-image: radial-gradient(520px circle at center, #000 0%, rgba(0, 0, 0, .72) 48%, transparent 100%) !important;
    -webkit-mask-image: radial-gradient(520px circle at center, #000 0%, rgba(0, 0, 0, .72) 48%, transparent 100%) !important;
}

html.combeat-page-canvas :is(.node, .node::before, .panel, .gate-panel, .canvas-context-card, .canvas-minimap, .create-menu) {
    background: #1f1f1f !important;
    background-color: #1f1f1f !important;
    background-image: none !important;
    border-color: #303030 !important;
    box-shadow: none !important;
}

html.combeat-page-canvas :is(.node-head, .group-node .node-head, .promptGroup-node .node-head) {
    background: #202020 !important;
    border-color: #303030 !important;
    color: #c6c6c6 !important;
}

html.combeat-page-canvas :is(.node-title, .current-canvas-title, .gate-title, .canvas-card-title) {
    color: #e7e7e7 !important;
}

html.combeat-page-canvas :is(.hint, .current-canvas-time, .canvas-card-time, .canvas-minimap-scale, .canvas-chat-meta, .canvas-chat-empty) {
    color: #8b8b8b !important;
}

html.combeat-page-canvas :is(.prompt-node textarea, .llm-chat-log, .llm-output, .gen-settings, .canvas-minimap-map, .canvas-chat-list, .canvas-chat-message, .canvas-continue-bubble) {
    background: #151515 !important;
    background-color: #151515 !important;
    border-color: #303030 !important;
    color: #e7e7e7 !important;
    box-shadow: none !important;
}

html.combeat-page-canvas :is(button, .tool-btn, .canvas-minimap-btn, .menu-btn, .secondary-btn, .canvas-preview-mark, .canvas-card-edit, .canvas-delete) {
    background: #242424 !important;
    background-color: #242424 !important;
    background-image: none !important;
    border-color: #343434 !important;
    color: #cfcfcf !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html.combeat-page-canvas :is(button, .tool-btn, .canvas-minimap-btn, .menu-btn, .secondary-btn, .canvas-preview-mark, .canvas-card-edit, .canvas-delete):hover {
    background: #303030 !important;
    background-color: #303030 !important;
    border-color: #4a4a4a !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

html.combeat-page-canvas .toolbar {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 24px !important;
    z-index: 40 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 10px !important;
    max-width: calc(100vw - 96px) !important;
    padding: 10px 12px 14px !important;
    overflow: visible !important;
    border: 1px solid #303030 !important;
    border-radius: 999px !important;
    background: rgba(31, 31, 31, .84) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .28) !important;
    transform: translateX(-50%) !important;
}

html.combeat-page-canvas .toolbar .tool-btn {
    position: relative !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: #242424 !important;
    border: 1px solid #343434 !important;
    color: #d7d7d7 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    transform-origin: center bottom !important;
    transition: transform .18s cubic-bezier(.4, 0, .2, 1), background-color .18s cubic-bezier(.4, 0, .2, 1), border-color .18s cubic-bezier(.4, 0, .2, 1), color .18s cubic-bezier(.4, 0, .2, 1) !important;
}

html.combeat-page-canvas .toolbar .tool-btn svg {
    width: 21px !important;
    height: 21px !important;
    color: currentColor !important;
}

html.combeat-page-canvas .toolbar .tool-btn span {
    position: absolute !important;
    left: 50% !important;
    bottom: calc(100% + 10px) !important;
    max-width: 128px !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    background: #f4f4f4 !important;
    border: 1px solid rgba(255, 255, 255, .2) !important;
    color: #111111 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate(-50%, 6px) scale(.98) !important;
    transition: opacity .14s cubic-bezier(.4, 0, .2, 1), transform .14s cubic-bezier(.4, 0, .2, 1) !important;
}

html.combeat-page-canvas .toolbar .tool-btn:hover,
html.combeat-page-canvas .toolbar .tool-btn:focus-visible {
    background: #303030 !important;
    border-color: #4a4a4a !important;
    color: #ffffff !important;
    transform: translateY(-8px) scale(1.1) !important;
}

html.combeat-page-canvas .toolbar .tool-btn:hover span,
html.combeat-page-canvas .toolbar .tool-btn:focus-visible span {
    opacity: 1 !important;
    transform: translate(-50%, 0) scale(1) !important;
}

@media (max-width: 760px) {
    html.combeat-page-canvas .toolbar {
        bottom: 14px !important;
        max-width: calc(100vw - 24px) !important;
        padding: 8px 9px 11px !important;
        gap: 8px !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
    }

    html.combeat-page-canvas .toolbar .tool-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
    }
}

/* Canvas chat history: keep records lightweight above the input box. */
html.combeat-page-canvas .canvas-chat-list {
    gap: 18px !important;
    padding: 14px 14px 18px !important;
    background: #161616 !important;
    border-bottom: 1px solid #303030 !important;
}

html.combeat-page-canvas .canvas-chat-row {
    gap: 5px !important;
}

html.combeat-page-canvas .canvas-chat-message,
html.combeat-page-canvas .canvas-chat-message.has-refs,
html.combeat-page-canvas .canvas-chat-row.user .canvas-chat-message,
html.combeat-page-canvas .canvas-chat-row.assistant .canvas-chat-message,
html.combeat-page-canvas .canvas-chat-row.system .canvas-chat-message {
    width: auto !important;
    max-width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #e7e7e7 !important;
    box-shadow: none !important;
}

html.combeat-page-canvas .canvas-chat-meta {
    padding: 0 !important;
    color: #8b8b8b !important;
}

html.combeat-page-canvas .canvas-chat-refs {
    margin-top: 10px !important;
    gap: 8px !important;
}

html.combeat-page-canvas .canvas-chat-ref {
    min-height: 0 !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

html.combeat-page-canvas .canvas-chat-ref:hover,
html.combeat-page-canvas .canvas-chat-ref:focus-visible {
    background: transparent !important;
    border-color: transparent !important;
    outline: 0 !important;
}

html.combeat-page-canvas .canvas-chat-ref img,
html.combeat-page-canvas .canvas-chat-ref video {
    width: 100% !important;
    max-height: 220px !important;
    object-fit: contain !important;
    border-radius: 12px !important;
    background: #111111 !important;
}

html.combeat-page-canvas .canvas-chat-ref span {
    left: 8px !important;
    right: auto !important;
    bottom: 8px !important;
    max-width: calc(100% - 16px) !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, .62) !important;
}