/* Unified typography scale for app pages. Keep the public home page untouched. */
:root {
    --cb-type-large: 18px;
    --cb-type-medium: 14px;
    --cb-type-small: 12px;
}

html:is(
    .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
) :is(
    body,
    p,
    li,
    td,
    a,
    label,
    input,
    textarea,
    select,
    button,
    summary,
    .btn,
    .ghost-btn,
    .primary-btn,
    .open-btn,
    .copy-btn,
    .replicate-btn,
    .tab-btn,
    .billing-tab,
    .circle-tool,
    .mode-menu-btn,
    .model-menu-btn,
    .param-toggle,
    .seg button,
    .result-text,
    .message-text,
    .bubble-text,
    .card,
    .record-card,
    .plan,
    .tool-card,
    .history-item,
    .model-option-main,
    .composer-tool-menu button,
    #promptInput
) {
    font-size: var(--cb-type-medium) !important;
    line-height: 1.55 !important;
}

html:is(
    .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
) :is(
    h1,
    h2,
    h3,
    h4,
    .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
) {
    font-size: var(--cb-type-large) !important;
    line-height: 1.35 !important;
}

html:is(
    .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
) :is(
    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,
    .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,
    .label,
    .picker-count,
    .picker-cat-tab,
    .picker-cat-tab .cat-count,
    .picker-other-tag,
    .picker-summary,
    .picker-sum-chip
) {
    font-size: var(--cb-type-small) !important;
    line-height: 1.45 !important;
}

html.combeat-page-index.combeat-top-frame body :is(
    .sidebar-settings-menu .sidebar-settings-item,
    .sidebar-settings-menu .sidebar-settings-item .label,
    .sidebar-settings-menu .sidebar-settings-item.pay-side-btn .label
) {
    font-size: var(--cb-type-medium) !important;
    line-height: 1.55 !important;
}

html.combeat-page-index.combeat-top-frame body.sidebar-collapsed .sidebar .sidebar-settings-menu .sidebar-settings-item,
html.combeat-page-index.combeat-top-frame body.sidebar-collapsed .sidebar .sidebar-settings-menu .sidebar-settings-item .label,
html.combeat-page-index.combeat-top-frame body.sidebar-collapsed .sidebar .sidebar-settings-menu .sidebar-settings-item.pay-side-btn .label {
    font-size: var(--cb-type-medium) !important;
    line-height: 1.55 !important;
}

html.combeat-page-index.combeat-top-frame body :is(
    .sidebar-settings-group-title,
    .sidebar-section-title,
    .account-label,
    .account-credits,
    .account-free,
    .history-record-meta,
    .history-placeholder
) {
    font-size: var(--cb-type-small) !important;
    line-height: 1.45 !important;
}

html.combeat-page-index.combeat-top-frame body :is(
    .nav-item .label,
    .side-btn .label,
    .history-record-title,
    .mobile-account-menu button
) {
    font-size: var(--cb-type-medium) !important;
    line-height: 1.55 !important;
}

/* Gemini-style flat visual pass for app pages. Keep the public home page untouched. */
html:is(
    .combeat-page-index.combeat-top-frame,
    .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
) {
    color-scheme: dark;
    --cb-bg: #0b0b0b;
    --cb-panel: #1f1f1f;
    --cb-panel-2: #242424;
    --cb-control: #303134;
    --cb-control-hover: #3c4043;
    --cb-line: rgba(232, 234, 237, .08);
    --cb-line-strong: rgba(232, 234, 237, .14);
    --cb-text: #e8eaed;
    --cb-muted: #9aa0a6;
    --cb-faint: #70757a;
}

html:is(
    .combeat-page-index.combeat-top-frame,
    .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
) body {
    background: var(--cb-bg) !important;
    background-image: none !important;
    color: var(--cb-text) !important;
}

html:is(
    .combeat-page-index.combeat-top-frame,
    .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
) body * {
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
}

html:is(
    .combeat-page-index.combeat-top-frame,
    .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
) :is(
    .shell,
    .app-shell,
    .stage,
    .page,
    .wrap,
    .main,
    .content,
    .studio-shell,
    .dialogue-stage,
    .result-list,
    .board
) {
    background-color: var(--cb-bg) !important;
    color: var(--cb-text) !important;
}

html:is(
    .combeat-page-index.combeat-top-frame,
    .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
) :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-item,
    .form,
    .model-panel,
    .gate-panel,
    .library,
    .canvas-nav,
    .ad-wrap,
    .invite-link,
    .composer-card,
    .composer-top,
    .param-card,
    .param-fields,
    .result-card,
    .loading-card,
    .empty-state,
    .composer-tool-menu,
    .model-menu,
    .mode-menu,
    .studio-side,
    .upload-tile,
    .select-wrap,
    .node,
    .block,
    .picker-modal
) {
    background: var(--cb-panel) !important;
    border-color: var(--cb-line) !important;
    color: var(--cb-text) !important;
}

html:is(
    .combeat-page-index.combeat-top-frame,
    .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
) :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,
    .copy-btn,
    .replicate-btn,
    .circle-tool,
    .mode-menu-btn,
    .model-menu-btn,
    .param-toggle,
    .seg button,
    .pill,
    .record-tab,
    .mode-btn
) {
    background: var(--cb-control) !important;
    border-color: var(--cb-line) !important;
    color: var(--cb-text) !important;
}

html:is(
    .combeat-page-index.combeat-top-frame,
    .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
) :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,
    #generateBtn
) {
    background: var(--cb-control-hover) !important;
    border-color: var(--cb-line-strong) !important;
    color: var(--cb-text) !important;
}

html:is(
    .combeat-page-index.combeat-top-frame,
    .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
) :is(
    .combeat-avatar,
    .profile-avatar,
    .account-avatar,
    .chat-avatar,
    .studio-logo,
    .empty-orb,
    .gate-list-empty-icon
) {
    background: var(--cb-control) !important;
    border-color: var(--cb-line) !important;
    color: var(--cb-text) !important;
}

html:is(
    .combeat-page-index.combeat-top-frame,
    .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
) :is(p, small, label, .muted, .hint, .faint, .note, .meta, .section-head p, .top-title p, .page-hero p, .tool-head p, .level-card-hint, .level-benefits li, .record-note, .result-meta) {
    color: var(--cb-muted) !important;
}

html:is(
    .combeat-page-index.combeat-top-frame,
    .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
) :is(th, td) {
    border-bottom-color: var(--cb-line) !important;
}

html:is(
    .combeat-page-index.combeat-top-frame,
    .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
) th {
    background: var(--cb-panel-2) !important;
    color: var(--cb-muted) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

html:is(
    .combeat-page-index.combeat-top-frame,
    .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
) tr:hover td {
    background: #171717 !important;
}

html.combeat-page-inspiration.combeat-page-inspiration body > .shell#shell > header.topbar,
html.combeat-page-inspiration.combeat-page-inspiration body > .shell#shell > header.topbar.topbar,
html.combeat-page-inspiration.combeat-page-inspiration body > .shell#shell > header.topbar::before,
html.combeat-page-inspiration.combeat-page-inspiration body > .shell#shell > header.topbar::after {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}