:root {
    --cb-control-radius: 13px;
    --cb-button-radius: 13px;
    --cb-masonry-radius: 8px;
    --cb-bg: #1b1927;
    --cb-bg-deep: #11111c;
    --cb-rail: rgba(24, 23, 36, .96);
    --cb-panel: rgba(31, 31, 48, .78);
    --cb-panel-strong: rgba(38, 38, 58, .92);
    --cb-panel-soft: rgba(255, 255, 255, .055);
    --cb-line: rgba(255, 255, 255, .085);
    --cb-line-strong: rgba(255, 255, 255, .16);
    --cb-text: #fbfaff;
    --cb-muted: #9b9ab0;
    --cb-faint: #6f7086;
    --cb-blue: #168cff;
    --cb-blue-2: #37a9ff;
    --cb-cyan: #58e6ff;
    --cb-pink: #d65f75;
    --cb-violet: #6d84a6;
    --cb-green: #2de39d;
    --cb-shadow: 0 28px 74px rgba(0, 0, 0, .34);
    --cb-shadow-soft: 0 18px 44px rgba(0, 0, 0, .24);
    --cb-ease: cubic-bezier(.22, .61, .36, 1);
}

html:not(.studio-theme-dark) {
    --cb-bg: #d9ecff;
    --cb-bg-deep: #edf6ff;
    --cb-rail: rgba(255, 255, 255, .82);
    --cb-panel: rgba(255, 255, 255, .78);
    --cb-panel-strong: rgba(255, 255, 255, .94);
    --cb-panel-soft: rgba(13, 36, 72, .055);
    --cb-line: rgba(20, 39, 70, .10);
    --cb-line-strong: rgba(20, 39, 70, .18);
    --cb-text: #151629;
    --cb-muted: #667085;
    --cb-faint: #8e9aad;
    --cb-blue: #168cff;
    --cb-blue-2: #0074ed;
    --cb-shadow: 0 22px 62px rgba(31, 76, 122, .16);
    --cb-shadow-soft: 0 16px 40px rgba(31, 76, 122, .12);
}

html,
body {
    letter-spacing: 0 !important;
}

.hidden {
    display: none !important;
}

html.combeat-embedded-frame,
html.combeat-embedded-frame body {
    background: transparent !important;
}

body,
html.studio-theme-dark body,
body.studio-theme-dark {
    background:
        radial-gradient(circle at 83% 10%, rgba(22, 140, 255, .12), transparent 30%),
        radial-gradient(circle at 22% 18%, rgba(53, 224, 196, .07), transparent 34%),
        linear-gradient(135deg, var(--cb-bg) 0%, var(--cb-bg-deep) 100%) !important;
    color: var(--cb-text) !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

html:not(.studio-theme-dark) body {
    background:
        radial-gradient(circle at 80% 12%, rgba(22, 140, 255, .20), transparent 30%),
        radial-gradient(circle at 18% 16%, rgba(88, 230, 255, .16), transparent 32%),
        linear-gradient(135deg, var(--cb-bg) 0%, var(--cb-bg-deep) 100%) !important;
    color: var(--cb-text) !important;
}

.app-shell,
.shell,
.stage,
html.studio-theme-dark body .app-shell,
html.studio-theme-dark body .shell,
html.studio-theme-dark body .stage,
body.studio-theme-dark .app-shell,
body.studio-theme-dark .shell,
body.studio-theme-dark .stage {
    background: transparent !important;
}

iframe,
iframe.active {
    background: transparent !important;
}

.sidebar,
.side-panel,
html.studio-theme-dark body .sidebar,
body.studio-theme-dark .sidebar {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

html:not(.studio-theme-dark) .sidebar,
html:not(.studio-theme-dark) .side-panel {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.stage {
    margin: 0 !important;
    border: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
    backdrop-filter: none !important;
}

html:not(.studio-theme-dark) .stage {
    background: transparent !important;
}

.brand {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.brand-mark,
.brand img,
.logo-ring {
    border-color: var(--cb-line) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .025)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .11), 0 12px 28px rgba(0, 0, 0, .16) !important;
}

.nav-item,
.side-btn,
.nav-btn,
.side-pill,
.theme-dock-btn {
    border-color: transparent !important;
    background: transparent !important;
    color: var(--cb-muted) !important;
    transition: transform .18s var(--cb-ease), color .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.nav-item:hover,
.side-btn:hover,
.nav-btn:hover,
.side-pill:hover,
.theme-dock-btn:hover {
    background: transparent !important;
    color: var(--cb-text) !important;
    transform: translateY(-1px);
}

html:not(.studio-theme-dark) .nav-item:hover,
html:not(.studio-theme-dark) .side-btn:hover,
html:not(.studio-theme-dark) .nav-btn:hover,
html:not(.studio-theme-dark) .side-pill:hover,
html:not(.studio-theme-dark) .theme-dock-btn:hover {
    background: transparent !important;
}

.nav-item.active {
    color: #fff !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.nav-item.active::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 2px;
    height: 34px;
    border-radius: 999px;
    background: #fff;
    transform: translateY(-50%);
    box-shadow: 0 0 18px rgba(22, 140, 255, .55);
}

.nav-btn.active,
.theme-dock-btn.active {
    color: #fff !important;
    background: linear-gradient(135deg, var(--cb-blue), var(--cb-blue-2)) !important;
    border-color: rgba(255, 255, 255, .18) !important;
    box-shadow: 0 14px 30px rgba(22, 140, 255, .34) !important;
}

.nav-item.active svg,
.nav-item.active i,
.nav-btn.active svg,
.nav-btn.active i {
    color: #fff !important;
    filter: drop-shadow(0 6px 14px rgba(22, 140, 255, .30)) !important;
}

.console-card,
.work-panel,
.tool-panel,
.control-panel,
.result-frame,
.composer,
.composer-body,
.history-popover,
.thread-item,
.model-panel,
.gate-panel,
.lightbox-card,
#lightboxCard,
.topbar,
.setting-row,
.notice-card,
.auth-card,
.profile-mini,
.record-card,
.site-info-dialog,
.auth-dialog,
.modal,
.modal-card,
.table-wrap,
.stat-card,
html.studio-theme-dark body .console-card,
html.studio-theme-dark body .work-panel,
html.studio-theme-dark body .tool-panel,
html.studio-theme-dark body .control-panel,
html.studio-theme-dark body .result-frame,
html.studio-theme-dark body .composer,
html.studio-theme-dark body .composer-body,
html.studio-theme-dark body .history-popover,
html.studio-theme-dark body .thread-item,
html.studio-theme-dark body .model-panel,
html.studio-theme-dark body .gate-panel,
html.studio-theme-dark body .lightbox-card,
html.studio-theme-dark body #lightboxCard,
html.studio-theme-dark body .topbar,
html.studio-theme-dark body .setting-row,
body.studio-theme-dark .console-card,
body.studio-theme-dark .work-panel,
body.studio-theme-dark .tool-panel,
body.studio-theme-dark .control-panel,
body.studio-theme-dark .result-frame,
body.studio-theme-dark .composer,
body.studio-theme-dark .composer-body,
body.studio-theme-dark .history-popover,
body.studio-theme-dark .thread-item,
body.studio-theme-dark .model-panel,
body.studio-theme-dark .gate-panel,
body.studio-theme-dark .lightbox-card,
body.studio-theme-dark #lightboxCard,
body.studio-theme-dark .topbar,
body.studio-theme-dark .setting-row {
    border-color: var(--cb-line) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .060), rgba(255, 255, 255, .030)),
        var(--cb-panel) !important;
    color: var(--cb-text) !important;
    box-shadow: var(--cb-shadow-soft) !important;
    backdrop-filter: blur(20px);
}

html.combeat-embedded-frame .console-card,
html.combeat-embedded-frame .work-panel,
html.combeat-embedded-frame .tool-panel,
html.combeat-embedded-frame .control-panel,
html.combeat-embedded-frame .result-frame,
html.combeat-embedded-frame .composer,
html.combeat-embedded-frame .composer-body,
html.combeat-embedded-frame .model-panel,
html.combeat-embedded-frame .gate-panel,
html.combeat-embedded-frame .setting-row,
html.combeat-embedded-frame .notice-card,
html.combeat-embedded-frame .record-card,
html.combeat-embedded-frame .stat-card {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

html.combeat-embedded-frame .z-param-panel,
html.combeat-embedded-frame .engine-panel,
html.combeat-embedded-frame .provider-switch,
html.combeat-embedded-frame .ratio-grid,
html.combeat-embedded-frame .resolution-toggle,
html.combeat-embedded-frame .mode-switch,
html.combeat-embedded-frame .mini-ratio,
html.combeat-embedded-frame .topbar {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.topbar,
html.studio-theme-dark body .topbar,
body.studio-theme-dark .topbar {
    background: transparent !important;
    box-shadow: none !important;
    border-color: var(--cb-line) !important;
}

.console-card > .bg-gray-50\/50,
.console-card > .bg-gray-50,
.console-card > .bg-white,
.console-card > .bg-white\/90,
.work-panel > .topbar,
.tool-panel > .topbar,
.control-panel > .topbar,
.panel > .topbar,
.section > .topbar,
.card > .topbar,
html.studio-theme-dark body .console-card > .bg-gray-50\/50,
html.studio-theme-dark body .console-card > .bg-gray-50,
html.studio-theme-dark body .console-card > .bg-white,
html.studio-theme-dark body .console-card > .bg-white\/90,
body.studio-theme-dark .console-card > .bg-gray-50\/50,
body.studio-theme-dark .console-card > .bg-gray-50,
body.studio-theme-dark .console-card > .bg-white,
body.studio-theme-dark .console-card > .bg-white\/90 {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

html:not(.studio-theme-dark) .console-card,
html:not(.studio-theme-dark) .work-panel,
html:not(.studio-theme-dark) .tool-panel,
html:not(.studio-theme-dark) .control-panel,
html:not(.studio-theme-dark) .result-frame,
html:not(.studio-theme-dark) .composer,
html:not(.studio-theme-dark) .composer-body,
html:not(.studio-theme-dark) .history-popover,
html:not(.studio-theme-dark) .thread-item,
html:not(.studio-theme-dark) .model-panel,
html:not(.studio-theme-dark) .gate-panel,
html:not(.studio-theme-dark) .lightbox-card,
html:not(.studio-theme-dark) #lightboxCard,
html:not(.studio-theme-dark) .topbar,
html:not(.studio-theme-dark) .setting-row,
html:not(.studio-theme-dark) .notice-card,
html:not(.studio-theme-dark) .auth-card,
html:not(.studio-theme-dark) .profile-mini,
html:not(.studio-theme-dark) .record-card,
html:not(.studio-theme-dark) .site-info-dialog,
html:not(.studio-theme-dark) .auth-dialog,
html:not(.studio-theme-dark) .modal,
html:not(.studio-theme-dark) .modal-card,
html:not(.studio-theme-dark) .table-wrap,
html:not(.studio-theme-dark) .stat-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .68)),
        var(--cb-panel) !important;
    border-color: var(--cb-line) !important;
    color: var(--cb-text) !important;
    box-shadow: var(--cb-shadow-soft) !important;
}

.upload-item,
.node,
.bubble.assistant {
    border-color: var(--cb-line) !important;
    background: linear-gradient(160deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .026)) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .18) !important;
}

.record-card:hover,
.notice-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 70px rgba(0, 0, 0, .30) !important;
}

h1, h2, h3,
.top-title h1,
.brand-name,
.profile-name,
.setting-title,
.title,
.card-title,
.section-title,
.text-black,
.text-gray-700,
.text-slate-700 {
    color: var(--cb-text) !important;
    letter-spacing: -.01em !important;
}

.muted,
.hint,
.setting-meta,
.label-nano,
.text-gray-300,
.text-gray-400,
.text-gray-500,
.text-slate-400,
.text-slate-500,
.brand-sub,
.top-title p {
    color: var(--cb-muted) !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea,
select,
.input,
.select,
.nano-input,
.size-select,
.provider-select,
.select-lite,
.search input,
html.studio-theme-dark body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.studio-theme-dark body textarea,
html.studio-theme-dark body select,
body.studio-theme-dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body.studio-theme-dark textarea,
body.studio-theme-dark select {
    border: 1px solid var(--cb-line) !important;
    background-color: rgba(255, 255, 255, .060) !important;
    color: var(--cb-text) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .060), 0 12px 28px rgba(0, 0, 0, .12) !important;
    backdrop-filter: blur(14px);
}

select,
.select,
.nano-input:is(select),
.engine-select-grid select,
.size-select,
.provider-select,
.select-lite,
html.studio-theme-dark body select,
html.studio-theme-dark body .select,
html.studio-theme-dark body .nano-input:is(select),
html.studio-theme-dark body .engine-select-grid select,
html.studio-theme-dark body .size-select,
html.studio-theme-dark body .provider-select,
html.studio-theme-dark body .select-lite,
body.studio-theme-dark select,
body.studio-theme-dark .select,
body.studio-theme-dark .nano-input:is(select),
body.studio-theme-dark .engine-select-grid select,
body.studio-theme-dark .size-select,
body.studio-theme-dark .provider-select,
body.studio-theme-dark .select-lite {
    border-radius: var(--cb-control-radius) !important;
    overflow: hidden;
}

.select-shell,
.engine-select-grid .select-shell,
.provider-switch .select-shell,
.model-select-shell,
.select-wrap {
    border: 0 !important;
    border-radius: var(--cb-control-radius) !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
    backdrop-filter: none !important;
}

.select-shell > select,
.engine-select-grid .select-shell > select,
.provider-switch .select-shell > select,
.model-select-shell > select,
.select-wrap > select {
    display: block;
    border-radius: var(--cb-control-radius) !important;
}

html:not(.studio-theme-dark) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html:not(.studio-theme-dark) textarea,
html:not(.studio-theme-dark) select,
html:not(.studio-theme-dark) .input,
html:not(.studio-theme-dark) .select,
html:not(.studio-theme-dark) .nano-input,
html:not(.studio-theme-dark) .size-select,
html:not(.studio-theme-dark) .provider-select,
html:not(.studio-theme-dark) .select-lite,
html:not(.studio-theme-dark) .search input {
    background-color: rgba(255, 255, 255, .82) !important;
    color: var(--cb-text) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78), 0 10px 24px rgba(31, 76, 122, .08) !important;
}

input:focus,
textarea:focus,
select:focus,
.input:focus,
.select:focus,
.nano-input:focus,
.size-select:focus,
.provider-select:focus,
.select-lite:focus,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.input:focus-visible,
.select:focus-visible,
.nano-input:focus-visible,
.size-select:focus-visible,
.provider-select:focus-visible,
.select-lite:focus-visible {
    outline: none !important;
    border-color: rgba(22, 140, 255, .62) !important;
    box-shadow: 0 0 0 3px rgba(22, 140, 255, .18), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

input::placeholder,
textarea::placeholder {
    color: color-mix(in srgb, var(--cb-muted) 70%, transparent) !important;
}

textarea#prompt,
.console-card textarea#prompt,
html.studio-theme-dark body textarea#prompt,
body.studio-theme-dark textarea#prompt {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

button,
.btn,
.glass-btn,
.btn-render,
.gen-btn,
.comfy-run,
.send-btn,
.action-btn,
.replicate-btn,
.publish-inspiration-btn,
.load-more,
.site-info-link {
    transition: transform .18s var(--cb-ease), box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease !important;
}

.btn,
.glass-btn,
.btn-render,
.gen-btn,
.comfy-run,
.send-btn,
.action-btn,
.publish-inspiration-btn,
.site-info-link,
.load-trigger,
button.primary,
.primary-btn {
    min-height: 44px;
    border: 1px solid rgba(255, 255, 255, .20) !important;
    border-bottom-color: rgba(0, 80, 170, .48) !important;
    border-radius: var(--cb-button-radius) !important;
    background: linear-gradient(180deg, #35adff 0%, #1b93ff 52%, #168cff 100%) !important;
    color: #fff !important;
    box-shadow: 0 14px 28px rgba(22, 140, 255, .30), inset 0 1px 0 rgba(255, 255, 255, .36) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 1px 2px rgba(0, 46, 108, .25);
}

.btn:hover,
.glass-btn:hover,
.btn-render:hover,
.gen-btn:hover,
.comfy-run:hover,
.send-btn:hover,
.action-btn:hover,
.publish-inspiration-btn:hover,
.site-info-link:hover,
.load-trigger:hover,
button.primary:hover,
.primary-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(180deg, #51baff 0%, #249cff 52%, #087df1 100%) !important;
    box-shadow: 0 18px 40px rgba(22, 140, 255, .42), inset 0 1px 0 rgba(255, 255, 255, .40) !important;
}

.btn svg,
.glass-btn svg,
.btn-render svg,
.gen-btn svg,
.comfy-run svg,
.send-btn svg,
.action-btn svg,
.publish-inspiration-btn svg,
.site-info-link svg,
.load-trigger svg,
button.primary svg,
.primary-btn svg,
.btn i,
.glass-btn i,
.btn-render i,
.gen-btn i,
.comfy-run i,
.send-btn i,
.action-btn i,
.publish-inspiration-btn i,
.site-info-link i,
.load-trigger i,
button.primary i,
.primary-btn i {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    color: currentColor !important;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.20));
}

.btn.secondary,
.glass-btn.secondary,
.side-pill,
.icon-btn,
.tool-btn,
.row-actions button:not(.danger):not(.delete),
.site-info-close,
.auth-close {
    background: rgba(255, 255, 255, .070) !important;
    color: var(--cb-text) !important;
    border-color: var(--cb-line) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .075), 0 10px 28px rgba(0, 0, 0, .12) !important;
}

html:not(.studio-theme-dark) .btn.secondary,
html:not(.studio-theme-dark) .glass-btn.secondary,
html:not(.studio-theme-dark) .side-pill,
html:not(.studio-theme-dark) .icon-btn,
html:not(.studio-theme-dark) .tool-btn,
html:not(.studio-theme-dark) .row-actions button:not(.danger):not(.delete),
html:not(.studio-theme-dark) .site-info-close,
html:not(.studio-theme-dark) .auth-close {
    background: rgba(255, 255, 255, .82) !important;
    color: var(--cb-text) !important;
}

button:disabled,
.btn:disabled,
.glass-btn:disabled,
.btn-render:disabled,
.gen-btn:disabled,
.send-btn:disabled {
    opacity: .58 !important;
    transform: none !important;
    box-shadow: none !important;
}

.pill,
.badge,
.cb-model-badge,
.send-cost-label,
.status-bar,
.nano-monitor {
    background: rgba(22, 140, 255, .11) !important;
    border-color: rgba(22, 140, 255, .24) !important;
    color: #b9ddff !important;
}

html:not(.studio-theme-dark) .pill,
html:not(.studio-theme-dark) .badge,
html:not(.studio-theme-dark) .cb-model-badge,
html:not(.studio-theme-dark) .send-cost-label,
html:not(.studio-theme-dark) .status-bar,
html:not(.studio-theme-dark) .nano-monitor {
    color: #075ba6 !important;
}

.danger,
.delete,
.btn.danger,
.btn.delete,
.glass-btn.danger,
.action-btn.danger,
.action-btn.delete,
.side-pill.danger,
[data-action="delete"],
[data-action="logout"],
[data-tab="logout"],
#logoutBtn,
#adminLogoutBtn {
    color: #fff !important;
    background: linear-gradient(180deg, #ff4f86 0%, #f13f8f 55%, #eb2f87 100%) !important;
    border-color: rgba(255, 255, 255, .20) !important;
    border-bottom-color: rgba(150, 18, 82, .48) !important;
    border-radius: var(--cb-button-radius) !important;
    box-shadow: 0 14px 28px rgba(239, 61, 147, .28), inset 0 1px 0 rgba(255, 255, 255, .34) !important;
    text-shadow: 0 1px 2px rgba(105, 0, 50, .28);
}

.danger:hover,
.delete:hover,
.btn.danger:hover,
.btn.delete:hover,
.glass-btn.danger:hover,
.action-btn.danger:hover,
.action-btn.delete:hover,
.side-pill.danger:hover,
[data-action="delete"]:hover,
[data-action="logout"]:hover,
[data-tab="logout"]:hover,
#logoutBtn:hover,
#adminLogoutBtn:hover {
    background: linear-gradient(180deg, #ff6397 0%, #f84899 55%, #e92884 100%) !important;
    box-shadow: 0 18px 40px rgba(239, 61, 147, .36), inset 0 1px 0 rgba(255, 255, 255, .38) !important;
}

table {
    border-color: var(--cb-line) !important;
}

th {
    color: var(--cb-muted) !important;
    background: rgba(255, 255, 255, .040) !important;
}

td {
    border-color: var(--cb-line) !important;
    color: var(--cb-text) !important;
}

.z-param-panel,
.engine-panel,
.provider-switch,
.ratio-grid,
.resolution-toggle,
.mode-switch,
.mini-ratio {
    border-color: var(--cb-line) !important;
    background: rgba(255, 255, 255, .048) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .060), 0 16px 38px rgba(0, 0, 0, .14) !important;
}

html:not(.studio-theme-dark) .z-param-panel,
html:not(.studio-theme-dark) .engine-panel,
html:not(.studio-theme-dark) .provider-switch,
html:not(.studio-theme-dark) .ratio-grid,
html:not(.studio-theme-dark) .resolution-toggle,
html:not(.studio-theme-dark) .mode-switch,
html:not(.studio-theme-dark) .mini-ratio {
    background: rgba(255, 255, 255, .74) !important;
}

.ad-slide::after,
.masonry-item::after,
.card::after {
    pointer-events: none;
}

.ad-slide.has-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(15, 15, 24, .46), transparent 52%, rgba(15, 15, 24, .18));
}

.ad-copy {
    z-index: 3 !important;
}

/* Keep repeated content surfaces flat; only true panels carry a glass plate. */
.masonry,
.masonry .card,
.masonry-item,
.inspiration-card,
.card:not(.auth-card):not(.notice-card):not(.record-card):not(.stat-card),
.panel:not(.auth-card):not(.notice-card):not(.record-card),
.section:not(.auth-card):not(.notice-card):not(.record-card) {
    background: transparent !important;
    box-shadow: none !important;
}

.masonry .card,
.masonry-item,
.inspiration-card {
    border-color: transparent !important;
}

.masonry .card:hover,
.masonry-item:hover,
.inspiration-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: none !important;
}

.masonry .card,
.masonry .media-frame,
.masonry .card img,
.masonry .card video,
.masonry .skeleton-card,
.masonry .skeleton-card .media-frame {
    border-radius: var(--cb-masonry-radius) !important;
    overflow: hidden !important;
}

.masonry .media-frame,
.masonry .skeleton-card,
.masonry .skeleton-card .media-frame {
    background: transparent !important;
}

.masonry .card:not(.ready):not(.image-error) .media-frame {
    background: rgba(255,255,255,.032) !important;
}

.masonry .card:not(.ready):not(.image-error) .media-badge,
.masonry .card:not(.ready):not(.image-error) .copy-btn,
.masonry .card:not(.ready):not(.image-error) .replicate-btn {
    opacity: 0 !important;
    pointer-events: none !important;
}

.masonry .media-frame::before {
    background:
        linear-gradient(105deg, transparent 0%, rgba(255,255,255,.09) 48%, transparent 72%) !important;
}

html:not(.studio-theme-dark) .masonry .media-frame::before {
    background:
        linear-gradient(105deg, transparent 0%, rgba(255,255,255,.46) 48%, transparent 72%) !important;
}

.masonry .media-badge {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    opacity: 0 !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.42);
    transition: opacity .16s ease !important;
}

.masonry .card:hover .media-badge {
    opacity: 1 !important;
}

.masonry .media-badge svg {
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}

.loading,
.skeleton-card,
.skeleton {
    background: linear-gradient(90deg, rgba(255, 255, 255, .045), rgba(22, 140, 255, .12), rgba(255, 255, 255, .045)) !important;
    background-size: 220% 100% !important;
    animation: cbShimmer 1.35s linear infinite !important;
}

@keyframes cbShimmer {
    0% { background-position: 120% 0; }
    100% { background-position: -120% 0; }
}

@media (max-width: 760px) {
    .stage {
        margin: 0 !important;
        border-radius: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
    }
}

/* One-piece Combeat background: every page sits on the same canvas. */
:root {
    --cb-page-bg:
        radial-gradient(circle at 86% 82%, rgba(17, 111, 110, .42) 0%, rgba(17, 111, 110, .16) 26%, transparent 52%),
        radial-gradient(circle at 18% 24%, rgba(45, 59, 103, .18) 0%, transparent 44%),
        linear-gradient(135deg, #101827 0%, #080d16 42%, #041719 100%);
    --cb-panel: rgba(43, 43, 61, .82);
    --cb-line: rgba(255,255,255,.10);
    --cb-line-strong: rgba(255,255,255,.18);
    --cb-text: #f7f9ff;
    --cb-muted: #9aa5b7;
}

html:not(.studio-theme-dark) {
    --cb-page-bg:
        radial-gradient(circle at 84% 82%, rgba(39, 190, 183, .22) 0%, transparent 48%),
        radial-gradient(circle at 16% 18%, rgba(74, 144, 226, .16) 0%, transparent 42%),
        linear-gradient(135deg, #eaf6ff 0%, #f7fbff 48%, #eaf9f8 100%);
    --cb-panel: rgba(255,255,255,.76);
    --cb-line: rgba(15,23,42,.10);
    --cb-line-strong: rgba(15,23,42,.18);
    --cb-text: #111827;
    --cb-muted: #667085;
}

html,
body,
html.studio-theme-dark,
html.studio-theme-dark body,
body.studio-theme-dark {
    background: var(--cb-page-bg) fixed !important;
}

html.combeat-embedded-frame,
html.combeat-embedded-frame body,
html.combeat-embedded-frame.studio-theme-dark,
html.combeat-embedded-frame.studio-theme-dark body {
    background: transparent !important;
}

html.combeat-embedded-frame body::before,
html.combeat-embedded-frame body::after {
    display: none !important;
}

.app-shell,
.stage,
.shell,
iframe,
iframe.active,
html.combeat-embedded-frame .shell,
html.combeat-embedded-frame main,
html.combeat-embedded-frame header {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html.combeat-embedded-frame .console-card,
html.combeat-embedded-frame .work-panel,
html.combeat-embedded-frame .tool-panel,
html.combeat-embedded-frame .control-panel,
html.combeat-embedded-frame .result-frame,
html.combeat-embedded-frame .composer,
html.combeat-embedded-frame .composer-body,
html.combeat-embedded-frame .model-panel,
html.combeat-embedded-frame .gate-panel,
html.combeat-embedded-frame .history-popover,
html.combeat-embedded-frame .thread-item,
html.combeat-embedded-frame .setting-row,
html.combeat-embedded-frame .notice-card,
html.combeat-embedded-frame .record-card,
html.combeat-embedded-frame .stat-card,
html.combeat-embedded-frame .upload-item,
html.combeat-embedded-frame .node,
html.combeat-embedded-frame .bubble.assistant,
html.combeat-embedded-frame .z-param-panel,
html.combeat-embedded-frame .engine-panel,
html.combeat-embedded-frame .provider-switch,
html.combeat-embedded-frame .ratio-grid,
html.combeat-embedded-frame .resolution-toggle,
html.combeat-embedded-frame .mode-switch,
html.combeat-embedded-frame .mini-ratio,
html.combeat-embedded-frame .topbar {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.auth-card,
.site-info-dialog,
.auth-dialog,
.modal-card,
.lightbox-card,
#lightboxCard {
    background: linear-gradient(180deg, rgba(48,48,66,.88), rgba(35,35,51,.86)) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 26px 82px rgba(0,0,0,.42) !important;
    backdrop-filter: blur(22px);
}

html:not(.studio-theme-dark) .auth-card,
html:not(.studio-theme-dark) .site-info-dialog,
html:not(.studio-theme-dark) .auth-dialog,
html:not(.studio-theme-dark) .modal-card,
html:not(.studio-theme-dark) .lightbox-card,
html:not(.studio-theme-dark) #lightboxCard {
    background: rgba(255,255,255,.80) !important;
    border-color: rgba(15,23,42,.10) !important;
    box-shadow: 0 24px 72px rgba(15,23,42,.14) !important;
}

/* Final unified-canvas pass: the whole product uses one background layer. */
:root {
    --bg: transparent;
    --page: transparent;
    --stage: transparent;
    --rail: transparent;
    --card: transparent;
    --card-solid: transparent;
}

html,
body,
html.studio-theme-dark,
html.studio-theme-dark body,
body.studio-theme-dark {
    min-height: 100%;
    background: var(--cb-page-bg) center / cover fixed no-repeat !important;
}

html.combeat-embedded-frame,
html.combeat-embedded-frame body,
html.combeat-embedded-frame.studio-theme-dark,
html.combeat-embedded-frame.studio-theme-dark body {
    background: transparent !important;
}

.app-shell,
.sidebar,
.side-panel,
.stage,
.shell,
.main,
.page,
.content,
.workspace,
.layout,
.layout-container,
.admin-layout,
.account-layout,
main,
section,
iframe,
iframe.active {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html.combeat-top-frame .stage {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
}

html.combeat-top-frame .sidebar {
    border: 0 !important;
}

.nav-item,
.side-btn,
.nav-btn,
.side-pill,
.theme-dock-btn {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.nav-item:hover,
.side-btn:hover,
.nav-btn:hover,
.side-pill:hover,
.theme-dock-btn:hover,
.nav-item.active,
.nav-btn.active,
.theme-dock-btn.active {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.nav-item.active::before,
.nav-item.active::after,
.side-btn::before,
.side-btn::after {
    content: none !important;
    display: none !important;
}

.status-bar {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

html.combeat-embedded-frame body > .shell,
html.combeat-embedded-frame body > .page,
html.combeat-embedded-frame body > .main,
html.combeat-embedded-frame body > .content {
    background: transparent !important;
}

html.combeat-embedded-frame .topbar,
html.combeat-embedded-frame .ad-wrap,
html.combeat-embedded-frame .ad-slide,
html.combeat-embedded-frame .ad-fallback,
html.combeat-embedded-frame .masonry,
html.combeat-embedded-frame .masonry .card,
html.combeat-embedded-frame .masonry-item,
html.combeat-embedded-frame .inspiration-card,
html.combeat-embedded-frame .console-card,
html.combeat-embedded-frame .work-panel,
html.combeat-embedded-frame .tool-panel,
html.combeat-embedded-frame .control-panel,
html.combeat-embedded-frame .result-frame,
html.combeat-embedded-frame .composer,
html.combeat-embedded-frame .composer-body,
html.combeat-embedded-frame .model-panel,
html.combeat-embedded-frame .gate-panel,
html.combeat-embedded-frame .history-popover,
html.combeat-embedded-frame .thread-item,
html.combeat-embedded-frame .setting-row,
html.combeat-embedded-frame .notice-card,
html.combeat-embedded-frame .record-card,
html.combeat-embedded-frame .stat-card,
html.combeat-embedded-frame .upload-item,
html.combeat-embedded-frame .node,
html.combeat-embedded-frame .bubble.assistant,
html.combeat-embedded-frame .z-param-panel,
html.combeat-embedded-frame .engine-panel,
html.combeat-embedded-frame .provider-switch,
html.combeat-embedded-frame .ratio-grid,
html.combeat-embedded-frame .resolution-toggle,
html.combeat-embedded-frame .mode-switch,
html.combeat-embedded-frame .mini-ratio,
html.combeat-embedded-frame .panel,
html.combeat-embedded-frame .card:not(.auth-card):not(.modal-card):not(.lightbox-card) {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

html.combeat-embedded-frame .ad-wrap {
    border-radius: 0 !important;
}

html.combeat-embedded-frame .ad-slide.has-image::before {
    opacity: .18 !important;
}

html.combeat-embedded-frame .ad-slide.has-image::after {
    background: linear-gradient(90deg, rgba(4, 9, 18, .38), transparent 54%, rgba(4, 9, 18, .12)) !important;
}

html.combeat-embedded-frame .masonry .card,
html.combeat-embedded-frame .masonry .media-frame,
html.combeat-embedded-frame .masonry .card img,
html.combeat-embedded-frame .masonry .card video,
html.combeat-embedded-frame .masonry .skeleton-card,
html.combeat-embedded-frame .masonry .skeleton-card .media-frame {
    border-radius: var(--cb-masonry-radius) !important;
    overflow: hidden !important;
}

html.combeat-embedded-frame .masonry .card:not(.ready):not(.image-error),
html.combeat-embedded-frame .masonry .card:not(.ready):not(.image-error) .media-frame,
html.combeat-embedded-frame .masonry .skeleton-card,
html.combeat-embedded-frame .masonry .skeleton-card .media-frame,
html.combeat-embedded-frame .loading,
html.combeat-embedded-frame .skeleton {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

html.combeat-embedded-frame .masonry .media-frame::before,
html.combeat-embedded-frame .masonry .skeleton-card .media-frame::before {
    background: linear-gradient(105deg, transparent 0%, rgba(88, 199, 246, .13) 46%, transparent 72%) !important;
    opacity: .44 !important;
}

html.combeat-embedded-frame .masonry .card.ready .media-frame::before,
html.combeat-embedded-frame .masonry .card.image-error .media-frame::before {
    opacity: 0 !important;
}

html.combeat-embedded-frame .masonry .card img,
html.combeat-embedded-frame .masonry .card video {
    background: transparent !important;
}

html.combeat-embedded-frame [class~="bg-white"],
html.combeat-embedded-frame [class~="bg-gray-50"],
html.combeat-embedded-frame [class~="bg-slate-50"],
html.combeat-embedded-frame [class~="bg-[#f8f8f9]"],
html.combeat-embedded-frame [class*="bg-white/"],
html.combeat-embedded-frame [class*="bg-gray-50/"],
html.combeat-embedded-frame [class*="bg-slate-50/"] {
    background: transparent !important;
    background-color: transparent !important;
}

/* The canvas keeps its own board/grid surface; all other tools share the waterfall background. */
html.combeat-page-canvas,
html.combeat-page-canvas body,
html.combeat-page-canvas.combeat-embedded-frame,
html.combeat-page-canvas.combeat-embedded-frame body {
    background: var(--page, #0b1020) !important;
}

html.combeat-page-canvas .shell,
html.combeat-page-canvas .board,
html.combeat-page-canvas .canvas-gate {
    background-color: var(--page, #0b1020) !important;
}

html.combeat-page-canvas .board,
html.combeat-page-canvas .canvas-gate {
    background-image: radial-gradient(var(--grid, rgba(148,163,184,.16)) 1px, transparent 1px) !important;
    background-size: 24px 24px !important;
}

html.combeat-page-canvas.combeat-embedded-frame .topbar {
    background: transparent !important;
}

html.combeat-page-canvas.combeat-embedded-frame .panel,
html.combeat-page-canvas.combeat-embedded-frame .gate-panel {
    background: var(--panel) !important;
    border-color: var(--line) !important;
    box-shadow: 0 16px 44px var(--shadow) !important;
    backdrop-filter: blur(16px) !important;
}

html.combeat-page-canvas.combeat-embedded-frame .node {
    background: var(--card) !important;
    border-color: var(--line) !important;
    box-shadow: 0 16px 42px var(--shadow) !important;
}

html.combeat-page-canvas.combeat-embedded-frame .node::before {
    background: var(--card) !important;
}

/* Tool pages use the inspiration/waterfall canvas directly, even when opened standalone. */
html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat),
html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat) body {
    background: var(--cb-page-bg) center / cover fixed no-repeat !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat) body::before,
html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat) body::after {
    display: none !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat) :is(
    header,
    main,
    section,
    .layout-container,
    .chat-shell,
    .topbar,
    .topbar-inner,
    .composer-wrap,
    .console-card,
    .work-panel,
    .tool-panel,
    .control-panel,
    .result-frame,
    .engine-panel,
    .z-param-panel,
    .composer,
    .composer-body,
    .model-panel,
    .gate-panel,
    .history-popover,
    .thread-item,
    .upload-item,
    .masonry-grid,
    .masonry-item
) {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat) :is(
    [class~="bg-white"],
    [class~="bg-gray-50"],
    [class~="bg-slate-50"],
    [class~="bg-[#f8f8f9]"],
    [class*="bg-white/"],
    [class*="bg-gray-50/"],
    [class*="bg-slate-50/"]
) {
    background: transparent !important;
    background-color: transparent !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat) :is(
    .nano-input,
    .size-select,
    .provider-select,
    .select-lite,
    .size-custom,
    .mode-switcher,
    .model-pill,
    .provider-switch,
    .mode-switch,
    .mini-ratio,
    .resolution-toggle,
    .search input,
    textarea:not(#prompt),
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"])
) {
    background-color: rgba(12, 18, 31, .72) !important;
    border-color: rgba(148, 163, 184, .16) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.12) !important;
    backdrop-filter: blur(14px) !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) :is(
    .nano-input,
    .size-select,
    .provider-select,
    .select-lite,
    .size-custom,
    .mode-switcher,
    .model-pill,
    .provider-switch,
    .mode-switch,
    .mini-ratio,
    .resolution-toggle,
    .search input,
    textarea:not(#prompt),
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"])
) {
    background-color: rgba(255,255,255,.76) !important;
    border-color: rgba(15,23,42,.10) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.66), 0 10px 24px rgba(15,23,42,.06) !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat) textarea#prompt {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat) .masonry-item {
    border-radius: var(--cb-masonry-radius) !important;
    overflow: hidden !important;
}

html.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(
    header,
    main,
    section,
    .layout-container,
    .chat-shell,
    .topbar,
    .topbar-inner,
    .composer-wrap,
    .console-card,
    .console-card > div,
    .work-panel,
    .tool-panel,
    .control-panel,
    .result-frame,
    .engine-panel,
    .z-param-panel,
    .composer,
    .composer-body,
    .model-panel,
    .gate-panel,
    .upload-item,
    .masonry-grid,
    .masonry-item
),
html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat):not(.studio-theme-dark) body :is(
    header,
    main,
    section,
    .layout-container,
    .chat-shell,
    .topbar,
    .topbar-inner,
    .composer-wrap,
    .console-card,
    .console-card > div,
    .work-panel,
    .tool-panel,
    .control-panel,
    .result-frame,
    .engine-panel,
    .z-param-panel,
    .composer,
    .composer-body,
    .model-panel,
    .gate-panel,
    .upload-item,
    .masonry-grid,
    .masonry-item
) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

html.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(
    [class~="bg-white"],
    [class~="bg-gray-50"],
    [class~="bg-slate-50"],
    [class~="bg-[#f8f8f9]"],
    [class*="bg-white/"],
    [class*="bg-gray-50/"],
    [class*="bg-slate-50/"]
),
html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat):not(.studio-theme-dark) body :is(
    [class~="bg-white"],
    [class~="bg-gray-50"],
    [class~="bg-slate-50"],
    [class~="bg-[#f8f8f9]"],
    [class*="bg-white/"],
    [class*="bg-gray-50/"],
    [class*="bg-slate-50/"]
) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Visual balance pass: one shared background, with lightweight functional sections restored. */
:root {
    --cb-page-bg:
        radial-gradient(circle at 82% 78%, rgba(10, 108, 101, .58) 0%, rgba(7, 74, 72, .34) 28%, transparent 54%),
        radial-gradient(circle at 18% 16%, rgba(38, 55, 97, .28) 0%, transparent 42%),
        linear-gradient(135deg, #101827 0%, #080d16 46%, #041719 100%);
    --cb-surface: rgba(17, 24, 39, .58);
    --cb-surface-strong: rgba(26, 33, 51, .68);
    --cb-surface-soft: rgba(255, 255, 255, .055);
    --cb-surface-line: rgba(155, 178, 210, .18);
    --cb-surface-line-strong: rgba(181, 205, 235, .28);
    --cb-surface-shadow: 0 22px 58px rgba(0, 0, 0, .26);
    --cb-surface-radius: 22px;
}

html:not(.studio-theme-dark) {
    --cb-page-bg:
        radial-gradient(circle at 82% 78%, rgba(46, 190, 181, .24) 0%, transparent 50%),
        radial-gradient(circle at 18% 18%, rgba(74, 144, 226, .16) 0%, transparent 42%),
        linear-gradient(135deg, #eaf6ff 0%, #f7fbff 48%, #eaf9f8 100%);
    --cb-surface: rgba(255, 255, 255, .70);
    --cb-surface-strong: rgba(255, 255, 255, .82);
    --cb-surface-soft: rgba(15, 23, 42, .045);
    --cb-surface-line: rgba(15, 23, 42, .10);
    --cb-surface-line-strong: rgba(15, 23, 42, .18);
    --cb-surface-shadow: 0 18px 48px rgba(31, 76, 122, .12);
}

html,
body,
html.studio-theme-dark body,
body.studio-theme-dark {
    background: var(--cb-page-bg) center / cover fixed no-repeat !important;
}

html.combeat-top-frame .app-shell {
    position: relative !important;
    isolation: isolate;
    background: var(--cb-page-bg) center / cover fixed no-repeat !important;
}

html.combeat-top-frame .app-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--cb-page-bg) center / cover fixed no-repeat;
}

html.combeat-top-frame .sidebar,
html.combeat-top-frame .stage,
html.combeat-top-frame iframe {
    background: transparent !important;
    background-color: transparent !important;
}

html.combeat-top-frame .sidebar {
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

html.combeat-top-frame .stage {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html.combeat-embedded-frame:not(.combeat-page-canvas),
html.combeat-embedded-frame:not(.combeat-page-canvas) body {
    background: transparent !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat) :is(
    .console-card,
    .console-card > div,
    .tool-panel,
    .control-panel,
    .result-frame,
    .engine-panel,
    .z-param-panel,
    .composer,
    .composer-body,
    .history-popover,
    .thread-item,
    .upload-item,
    .nano-input,
    textarea:not(#prompt),
    textarea#promptInput,
    textarea#msPromptInput
),
html.combeat-embedded-frame:not(.combeat-page-canvas) :is(
    .console-card,
    .console-card > div,
    .tool-panel,
    .control-panel,
    .result-frame,
    .engine-panel,
    .z-param-panel,
    .composer,
    .composer-body,
    .history-popover,
    .thread-item,
    .upload-item,
    .nano-input,
    textarea:not(#prompt),
    textarea#promptInput,
    textarea#msPromptInput
) {
    background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .020)), var(--cb-surface) !important;
    border: 1px solid var(--cb-surface-line) !important;
    box-shadow: var(--cb-surface-shadow) !important;
    backdrop-filter: blur(18px) saturate(1.04) !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat) :is(
    .console-card,
    .tool-panel,
    .control-panel,
    .result-frame,
    .engine-panel,
    .z-param-panel,
    .composer,
    .history-popover,
    .upload-item
) {
    border-radius: var(--cb-surface-radius) !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat) .console-card > div {
    border-radius: calc(var(--cb-surface-radius) - 5px) !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat) :is(
    .size-select,
    .provider-select,
    .select-lite,
    .size-custom,
    .mode-switcher,
    .model-pill,
    .provider-switch,
    .mode-switch,
    .mini-ratio,
    .resolution-toggle
) {
    background-color: rgba(10, 16, 28, .78) !important;
    border-color: var(--cb-surface-line) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 10px 24px rgba(0,0,0,.12) !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) :is(
    .size-select,
    .provider-select,
    .select-lite,
    .size-custom,
    .mode-switcher,
    .model-pill,
    .provider-switch,
    .mode-switch,
    .mini-ratio,
    .resolution-toggle
) {
    background-color: rgba(255,255,255,.82) !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat) :is(
    .model-option.active,
    .provider-switch button.active,
    .mode-switch button.active,
    .mini-ratio button.active,
    .resolution-option.active
) {
    background: var(--cb-surface-strong) !important;
    color: var(--cb-text) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.12) !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat) .result-frame {
    min-height: 480px;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat) .masonry-item {
    background: var(--cb-surface) !important;
    border: 1px solid var(--cb-surface-line) !important;
    box-shadow: 0 14px 38px rgba(0,0,0,.18) !important;
}

html.combeat-page-canvas,
html.combeat-page-canvas body,
html.combeat-page-canvas.combeat-embedded-frame,
html.combeat-page-canvas.combeat-embedded-frame body {
    background: var(--page, #0b1020) !important;
}

@media (max-width: 760px) {
    html.combeat-top-frame .stage {
        margin: 0 !important;
        border-radius: 0 !important;
    }
}

/* Reference dashboard skin: dark rounded workspace on a soft blue desktop. */
:root {
    --cb-ref-outer: #cfe6fa;
    --cb-ref-app: #1b1928;
    --cb-ref-app-2: #201e2e;
    --cb-ref-rail: #181624;
    --cb-ref-panel: rgba(38, 39, 58, .82);
    --cb-ref-panel-2: rgba(45, 46, 68, .76);
    --cb-ref-panel-3: rgba(28, 30, 47, .72);
    --cb-ref-line: rgba(151, 156, 188, .16);
    --cb-ref-line-strong: rgba(176, 183, 215, .26);
    --cb-ref-text: #f8f9ff;
    --cb-ref-muted: rgba(210, 217, 239, .56);
    --cb-ref-faint: rgba(195, 203, 228, .34);
    --cb-ref-blue: #168cff;
    --cb-ref-blue-2: #209bff;
    --cb-ref-radius-lg: 28px;
    --cb-ref-radius-md: 22px;
    --cb-ref-radius-sm: 16px;
    --cb-ref-shadow: 0 34px 90px rgba(18, 22, 42, .34);
    --cb-ref-card-shadow: 0 22px 54px rgba(0, 0, 0, .24);
    --cb-page-bg:
        radial-gradient(circle at 82% 78%, rgba(41, 77, 100, .16) 0%, transparent 48%),
        linear-gradient(135deg, #1b1928 0%, #181726 54%, #171523 100%);
}

html,
body,
html.studio-theme-dark body,
body.studio-theme-dark {
    color: var(--cb-ref-text) !important;
}

html.combeat-top-frame body {
    min-height: 100vh;
    background: var(--cb-ref-outer) !important;
    overflow: hidden !important;
}

html.combeat-top-frame .app-shell {
    width: min(1800px, calc(100vw - clamp(28px, 8vw, 144px))) !important;
    height: min(1280px, calc(100vh - clamp(28px, 7vw, 108px))) !important;
    margin: clamp(14px, 3.6vw, 56px) auto !important;
    border-radius: clamp(22px, 2vw, 34px) !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 70% 16%, rgba(52, 55, 85, .26), transparent 34%),
        linear-gradient(135deg, var(--cb-ref-app) 0%, #181725 58%, #171523 100%) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    box-shadow:
        0 42px 92px rgba(42, 73, 101, .26),
        0 18px 54px rgba(7, 10, 21, .24) !important;
}

html.combeat-top-frame .app-shell::before {
    display: none !important;
}

html.combeat-top-frame .sidebar {
    width: 104px !important;
    min-width: 104px !important;
    padding: 28px 0 24px !important;
    background: linear-gradient(180deg, rgba(24, 22, 36, .98), rgba(22, 20, 33, .98)) !important;
    border-right: 1px solid rgba(166, 173, 207, .12) !important;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .035) !important;
    gap: 24px !important;
}

html.combeat-top-frame .brand {
    width: 100% !important;
    height: 58px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 0 !important;
}

html.combeat-top-frame .brand-mark {
    width: 48px !important;
    height: 48px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    background:
        radial-gradient(circle at 72% 24%, rgba(255, 255, 255, .9) 0 5px, transparent 6px),
        linear-gradient(135deg, #2db9ff 0%, #168cff 70%, #1269f2 100%) !important;
    box-shadow: 0 18px 34px rgba(22, 140, 255, .24), inset 0 1px 0 rgba(255, 255, 255, .38) !important;
}

html.combeat-top-frame .brand-mark img {
    width: 32px !important;
    height: 32px !important;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .22));
}

html.combeat-top-frame .brand-text,
html.combeat-top-frame .nav .label,
html.combeat-top-frame .side-btn.icon-only .label,
html.combeat-top-frame .account-name,
html.combeat-top-frame .account-credits {
    display: none !important;
}

html.combeat-top-frame .nav {
    gap: 18px !important;
    padding: 44px 0 8px !important;
    align-items: center !important;
}

html.combeat-top-frame .nav-item,
html.combeat-top-frame .side-btn {
    width: 58px !important;
    height: 58px !important;
    flex: 0 0 58px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: transparent !important;
    color: rgba(214, 223, 248, .48) !important;
    box-shadow: none !important;
    overflow: visible !important;
}

html.combeat-top-frame .nav-item svg,
html.combeat-top-frame .side-btn svg,
html.combeat-top-frame .nav-item i,
html.combeat-top-frame .side-btn i {
    width: 26px !important;
    height: 26px !important;
    stroke-width: 1.95 !important;
    fill: none !important;
    filter: none !important;
}

html.combeat-top-frame .nav-item:hover,
html.combeat-top-frame .side-btn:hover {
    color: rgba(255, 255, 255, .86) !important;
    transform: translateY(-1px) !important;
}

html.combeat-top-frame .nav-item.active {
    color: #fff !important;
}

html.combeat-top-frame .nav-item.active::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: -23px !important;
    top: 50% !important;
    width: 3px !important;
    height: 50px !important;
    border-radius: 99px !important;
    background: #fff !important;
    transform: translateY(-50%) !important;
    box-shadow: 0 0 18px rgba(255, 255, 255, .42) !important;
}

html.combeat-top-frame .nav-item.active svg :is(path, rect, circle, polygon),
html.combeat-top-frame .nav-item.active svg :is(line, polyline) {
    fill: none !important;
    stroke: currentColor !important;
}

html.combeat-top-frame .side-actions {
    gap: 16px !important;
    margin-bottom: 0 !important;
}

html.combeat-top-frame .account-btn {
    order: 4;
}

html.combeat-top-frame .account-btn.is-user,
html.combeat-top-frame .account-btn.is-admin {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
    margin-top: 14px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
}

html.combeat-top-frame .account-level-mark {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
}

html.combeat-top-frame .stage {
    margin: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

html.combeat-top-frame iframe,
html.combeat-top-frame iframe.active {
    background: transparent !important;
}

html.combeat-top-frame .status-bar {
    left: 36px !important;
    bottom: 28px !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--cb-ref-muted) !important;
    box-shadow: none !important;
}

html.combeat-embedded-frame:not(.combeat-page-canvas),
html.combeat-embedded-frame:not(.combeat-page-canvas) body {
    background: transparent !important;
}

html:not(.combeat-embedded-frame):is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-inspiration) body {
    background:
        radial-gradient(circle at 72% 76%, rgba(27, 66, 72, .42), transparent 44%),
        linear-gradient(135deg, var(--cb-ref-app) 0%, #181725 58%, #171523 100%) !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat) body {
    color: var(--cb-ref-text) !important;
}

html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) body > div,
html.combeat-page-zimage .layout-container,
html.combeat-page-gpt-chat .topbar-inner,
html.combeat-page-gpt-chat .composer,
html.combeat-page-inspiration .shell {
    max-width: 1540px !important;
}

html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) body > div {
    padding: clamp(28px, 4.2vw, 58px) clamp(28px, 5vw, 64px) !important;
}

html.combeat-page-zimage header {
    padding-top: clamp(34px, 4vw, 60px) !important;
}

html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-zimage) h1,
html.combeat-page-gpt-chat h1,
html.combeat-page-inspiration .ad-title {
    color: #fff !important;
    font-weight: 900 !important;
    letter-spacing: -.04em !important;
    text-shadow: 0 12px 30px rgba(0, 0, 0, .28);
}

html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-zimage) p,
html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-zimage) span,
html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-zimage) label,
html.combeat-page-gpt-chat p,
html.combeat-page-gpt-chat span {
    color: inherit;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat) :is(
    .console-card,
    .console-card > div,
    .tool-panel,
    .control-panel,
    .result-frame,
    .engine-panel,
    .z-param-panel,
    .composer,
    .composer-body,
    .history-popover,
    .thread-item,
    .upload-item,
    .nano-input,
    textarea:not(#prompt),
    textarea#promptInput,
    textarea#msPromptInput
),
html.combeat-embedded-frame:not(.combeat-page-canvas) :is(
    .console-card,
    .console-card > div,
    .tool-panel,
    .control-panel,
    .result-frame,
    .engine-panel,
    .z-param-panel,
    .composer,
    .composer-body,
    .history-popover,
    .thread-item,
    .upload-item,
    .nano-input,
    textarea:not(#prompt),
    textarea#promptInput,
    textarea#msPromptInput
) {
    background:
        radial-gradient(circle at 88% 96%, rgba(22, 140, 255, .07), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .022)),
        var(--cb-ref-panel) !important;
    border: 1px solid var(--cb-ref-line) !important;
    border-radius: var(--cb-ref-radius-lg) !important;
    box-shadow: var(--cb-ref-card-shadow) !important;
    backdrop-filter: blur(18px) saturate(1.04) !important;
}

html.combeat-page-zimage .console-card {
    padding: 8px !important;
}

html.combeat-page-zimage .console-card > div {
    min-height: 150px !important;
    border-radius: 22px !important;
}

html.combeat-page-zimage .z-param-panel {
    margin: 14px 10px 10px !important;
    padding: 20px !important;
}

html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) .upload-item {
    background:
        radial-gradient(circle at 75% 88%, rgba(22, 140, 255, .06), transparent 48%),
        rgba(38, 39, 58, .72) !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat) :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    textarea,
    select,
    .size-select,
    .provider-select,
    .select-lite,
    .size-custom
) {
    min-height: 44px;
    border-radius: 16px !important;
    background: rgba(24, 25, 40, .84) !important;
    border: 1px solid rgba(156, 166, 205, .16) !important;
    color: #f8f9ff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 10px 26px rgba(0,0,0,.12) !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat) :is(
    input::placeholder,
    textarea::placeholder
) {
    color: rgba(204, 213, 241, .34) !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat) :is(
    .mode-switcher,
    .model-pill,
    .provider-switch,
    .mode-switch,
    .mini-ratio,
    .resolution-toggle
) {
    background: rgba(35, 36, 54, .82) !important;
    border: 1px solid rgba(156, 166, 205, .14) !important;
    border-radius: 18px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045) !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat) :is(
    .model-option.active,
    .provider-switch button.active,
    .mode-switch button.active,
    .mini-ratio button.active,
    .resolution-option.active,
    .mode-btn.active
) {
    color: #fff !important;
    background: rgba(255, 255, 255, .08) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.btn,
.glass-btn,
.btn-render,
.gen-btn,
.comfy-run,
.send-btn,
.action-btn,
.publish-inspiration-btn,
.load-trigger,
button.primary,
.primary-btn {
    border: 0 !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, #2aa1ff 0%, var(--cb-ref-blue) 100%) !important;
    color: #fff !important;
    box-shadow: 0 18px 42px rgba(22, 140, 255, .28), inset 0 1px 0 rgba(255,255,255,.28) !important;
    text-shadow: none !important;
}

.btn:hover,
.glass-btn:hover,
.btn-render:hover,
.gen-btn:hover,
.comfy-run:hover,
.send-btn:hover,
.action-btn:hover,
.publish-inspiration-btn:hover,
.load-trigger:hover,
button.primary:hover,
.primary-btn:hover {
    background: linear-gradient(180deg, #45afff 0%, #1487ff 100%) !important;
    box-shadow: 0 22px 52px rgba(22, 140, 255, .34), inset 0 1px 0 rgba(255,255,255,.32) !important;
}

html.combeat-page-gpt-chat .topbar {
    height: 92px !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(156, 166, 205, .12) !important;
}

html.combeat-page-gpt-chat .messages {
    background: transparent !important;
}

html.combeat-page-gpt-chat .composer-wrap {
    background: linear-gradient(to top, rgba(27, 25, 40, .94) 76%, rgba(27, 25, 40, 0)) !important;
}

html.combeat-page-gpt-chat .composer {
    border-radius: 26px !important;
}

html.combeat-page-inspiration .search {
    width: min(620px, 100%) !important;
}

html.combeat-page-inspiration .search input {
    height: 52px !important;
    border-radius: 22px !important;
    background: rgba(38, 39, 58, .78) !important;
    border: 1px solid rgba(156, 166, 205, .14) !important;
    color: #fff !important;
    box-shadow: 0 16px 42px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.055) !important;
}

html.combeat-page-inspiration .ad-wrap {
    border-radius: 28px !important;
    border: 1px solid rgba(156, 166, 205, .14) !important;
    box-shadow: 0 22px 58px rgba(0,0,0,.22) !important;
    background: rgba(38, 39, 58, .62) !important;
}

html.combeat-page-inspiration .masonry .card,
html.combeat-page-inspiration .masonry .media-frame,
html.combeat-page-inspiration .masonry .card img,
html.combeat-page-inspiration .masonry .card video {
    border-radius: 20px !important;
}

html.combeat-page-inspiration .masonry .card {
    border: 1px solid rgba(156, 166, 205, .12) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.22) !important;
    background: rgba(38, 39, 58, .36) !important;
}

html.combeat-page-canvas,
html.combeat-page-canvas body,
html.combeat-page-canvas.combeat-embedded-frame,
html.combeat-page-canvas.combeat-embedded-frame body {
    background: var(--page, #0b1020) !important;
}

@media (max-width: 900px) {
    html.combeat-top-frame .app-shell {
        width: 100vw !important;
        height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    html.combeat-top-frame .sidebar {
        width: 76px !important;
        min-width: 76px !important;
    }
}

/* Lock the reference skin to the dark dashboard palette, regardless of theme toggle. */
html.combeat-top-frame,
html.combeat-embedded-frame:not(.combeat-page-canvas),
html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-inspiration) {
    --cb-page-bg:
        radial-gradient(circle at 76% 72%, rgba(31, 51, 78, .20) 0%, transparent 46%),
        linear-gradient(135deg, #1d1b2b 0%, #191827 56%, #171523 100%) !important;
    --cb-ref-panel: rgba(38, 39, 58, .84);
    --cb-ref-panel-2: rgba(45, 46, 68, .78);
    --cb-ref-panel-3: rgba(28, 30, 47, .76);
    --cb-ref-line: rgba(151, 156, 188, .16);
    --cb-ref-line-strong: rgba(176, 183, 215, .26);
    --cb-ref-text: #f8f9ff;
    --cb-ref-muted: rgba(210, 217, 239, .56);
}

html.combeat-top-frame body {
    background: var(--cb-ref-outer) !important;
}

html.combeat-top-frame .app-shell {
    background:
        radial-gradient(circle at 70% 18%, rgba(62, 64, 95, .22), transparent 35%),
        linear-gradient(135deg, #1d1b2b 0%, #191827 56%, #171523 100%) !important;
}

html.combeat-top-frame .sidebar {
    background: linear-gradient(180deg, #191725 0%, #171522 100%) !important;
    border-right: 1px solid rgba(166, 173, 207, .12) !important;
}

html.combeat-top-frame .stage,
html.combeat-top-frame iframe,
html.combeat-top-frame iframe.active {
    background: transparent !important;
}

html.combeat-embedded-frame:not(.combeat-page-canvas),
html.combeat-embedded-frame:not(.combeat-page-canvas) body {
    background: transparent !important;
    color: var(--cb-ref-text) !important;
}

html:not(.combeat-embedded-frame):is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-inspiration) body {
    background:
        radial-gradient(circle at 74% 76%, rgba(34, 64, 86, .26), transparent 46%),
        linear-gradient(135deg, #1d1b2b 0%, #191827 56%, #171523 100%) !important;
}

html.combeat-page-inspiration .shell,
html.combeat-page-inspiration .topbar,
html.combeat-page-inspiration main,
html.combeat-page-inspiration section {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html.combeat-page-inspiration .search input {
    background: rgba(38, 39, 58, .86) !important;
    border-color: rgba(151, 156, 188, .18) !important;
    color: #fff !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-inspiration) :is(
    h1, h2, h3, .title, .section-title, .top-title h1, .card-title
) {
    color: #fff !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-inspiration) :is(
    .text-black,
    .text-gray-700,
    .text-slate-700
) {
    color: #f8f9ff !important;
}

/* 2026-05-23 reference task-dashboard skin. Final layer: keep behavior, replace visuals. */
:root {
    --cb-task-bg: #14161b;
    --cb-task-bg-2: #101217;
    --cb-task-rail: #1d1f27;
    --cb-task-panel: rgba(31, 33, 41, .94);
    --cb-task-panel-2: rgba(38, 41, 51, .92);
    --cb-task-panel-soft: rgba(255, 255, 255, .055);
    --cb-task-line: rgba(255, 255, 255, .095);
    --cb-task-line-2: rgba(255, 255, 255, .155);
    --cb-task-text: #f7f8ff;
    --cb-task-muted: rgba(216, 220, 234, .56);
    --cb-task-faint: rgba(207, 211, 225, .34);
    --cb-task-blue: #2f87ee;
    --cb-task-blue-2: #1a75df;
    --cb-task-purple: #8759e8;
    --cb-task-green: #16d45d;
    --cb-task-danger: #e64646;
    --cb-task-radius-xl: 30px;
    --cb-task-radius-lg: 24px;
    --cb-task-radius-md: 18px;
    --cb-task-radius-sm: 14px;
    --cb-task-shadow: 0 28px 76px rgba(0, 0, 0, .34);
    --cb-task-shadow-soft: 0 16px 38px rgba(0, 0, 0, .24);
    --cb-task-inset: inset 0 1px 0 rgba(255, 255, 255, .055);
    --cb-page-bg:
        radial-gradient(circle at 78% 18%, rgba(65, 58, 112, .16) 0%, transparent 30%),
        radial-gradient(circle at 18% 76%, rgba(47, 135, 238, .10) 0%, transparent 34%),
        linear-gradient(135deg, var(--cb-task-bg) 0%, var(--cb-task-bg-2) 100%) !important;
    color-scheme: dark;
}

html,
body,
html.studio-theme-dark,
html.studio-theme-dark body,
body.studio-theme-dark {
    background: var(--cb-page-bg) fixed !important;
    color: var(--cb-task-text) !important;
}

html:not(.studio-theme-dark) {
    --cb-page-bg:
        radial-gradient(circle at 78% 18%, rgba(65, 58, 112, .13) 0%, transparent 30%),
        radial-gradient(circle at 18% 76%, rgba(47, 135, 238, .09) 0%, transparent 34%),
        linear-gradient(135deg, #15171d 0%, #101218 100%) !important;
}

html.combeat-embedded-frame:not(.combeat-page-canvas),
html.combeat-embedded-frame:not(.combeat-page-canvas) body {
    background: transparent !important;
    color: var(--cb-task-text) !important;
}

html.combeat-page-index.combeat-top-frame body {
    background: var(--cb-page-bg) fixed !important;
    overflow: hidden !important;
}

html.combeat-page-index.combeat-top-frame .app-shell {
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--cb-page-bg) fixed !important;
    box-shadow: none !important;
}

html.combeat-page-index.combeat-top-frame .app-shell::before {
    display: none !important;
}

html.combeat-page-index.combeat-top-frame .sidebar {
    width: 112px !important;
    min-width: 112px !important;
    height: 100vh !important;
    padding: 28px 16px 22px !important;
    border: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, .075) !important;
    border-radius: 0 30px 30px 0 !important;
    background: linear-gradient(180deg, rgba(31, 33, 41, .98), rgba(27, 29, 36, .98)) !important;
    box-shadow: 14px 0 36px rgba(0, 0, 0, .18), var(--cb-task-inset) !important;
    backdrop-filter: none !important;
    gap: 24px !important;
}

html.combeat-page-index.combeat-top-frame .brand {
    width: 74px !important;
    height: 64px !important;
    margin: 0 auto 76px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html.combeat-page-index.combeat-top-frame .brand-mark,
html.combeat-page-login .brand-mark,
html.combeat-page-admin .brand,
html.combeat-page-account .brand img {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html.combeat-page-index.combeat-top-frame .brand-mark {
    width: 56px !important;
    height: 56px !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

html.combeat-page-index.combeat-top-frame .brand-mark img {
    width: 54px !important;
    height: 54px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 12px 26px rgba(47, 135, 238, .24)) !important;
}

html.combeat-page-index.combeat-top-frame .brand-text,
html.combeat-page-index.combeat-top-frame .nav .label,
html.combeat-page-index.combeat-top-frame .side-actions .label,
html.combeat-page-index.combeat-top-frame .account-name,
html.combeat-page-index.combeat-top-frame .account-credits {
    display: none !important;
}

html.combeat-page-index.combeat-top-frame .nav {
    flex: 1 1 auto !important;
    gap: 16px !important;
    width: 100% !important;
    padding: 0 0 10px !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

html.combeat-page-index.combeat-top-frame .side-actions {
    width: 100% !important;
    gap: 14px !important;
    margin: auto 0 0 !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(255, 255, 255, .075) !important;
}

html.combeat-page-index.combeat-top-frame .nav-item,
html.combeat-page-index.combeat-top-frame .side-home-btn,
html.combeat-page-index.combeat-top-frame .side-btn {
    width: 58px !important;
    height: 58px !important;
    flex: 0 0 58px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: rgba(239, 242, 255, .62) !important;
    box-shadow: none !important;
    overflow: visible !important;
}

html.combeat-page-index.combeat-top-frame .side-btn.icon-only {
    width: 52px !important;
    height: 52px !important;
    flex-basis: 52px !important;
}

html.combeat-page-index.combeat-top-frame .nav-item::before,
html.combeat-page-index.combeat-top-frame .side-btn::before {
    content: "" !important;
    position: absolute !important;
    inset: 6px !important;
    z-index: -1 !important;
    border-radius: inherit !important;
    background: rgba(255, 255, 255, .045) !important;
    opacity: 0 !important;
    transform: scale(.84) !important;
    transition: opacity .2s ease, transform .22s cubic-bezier(.2, .8, .2, 1), background .2s ease !important;
    display: block !important;
}

html.combeat-page-index.combeat-top-frame .nav-item:hover::before,
html.combeat-page-index.combeat-top-frame .side-btn:hover::before {
    opacity: 1 !important;
    transform: scale(1) !important;
}

html.combeat-page-index.combeat-top-frame .nav-item.active::before {
    opacity: 1 !important;
    transform: scale(1) !important;
    background: rgba(255, 255, 255, .075) !important;
}

html.combeat-page-index.combeat-top-frame .nav-item.active::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: -16px !important;
    top: 50% !important;
    width: 3px !important;
    height: 44px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    transform: translateY(-50%) !important;
    box-shadow: 0 0 18px rgba(255, 255, 255, .34) !important;
}

html.combeat-page-index.combeat-top-frame .nav-item svg,
html.combeat-page-index.combeat-top-frame .side-btn svg,
html.combeat-page-index.combeat-top-frame .nav-item i,
html.combeat-page-index.combeat-top-frame .side-btn i {
    width: 25px !important;
    height: 25px !important;
    stroke-width: 2.35 !important;
    fill: none !important;
    color: currentColor !important;
    filter: none !important;
}

html.combeat-page-index.combeat-top-frame .nav-item:hover,
html.combeat-page-index.combeat-top-frame .side-btn:hover,
html.combeat-page-index.combeat-top-frame .nav-item.active {
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

html.combeat-page-index.combeat-top-frame .nav-item.active svg :is(path, rect, circle, polygon, line, polyline),
html.combeat-page-index.combeat-top-frame .side-btn:hover svg :is(path, rect, circle, polygon, line, polyline) {
    stroke: currentColor !important;
}

html.combeat-page-index.combeat-top-frame .account-btn {
    order: -4 !important;
}

html.combeat-page-index.combeat-top-frame .account-level-mark {
    color: #fff !important;
    border: 0 !important;
    background: linear-gradient(135deg, var(--cb-task-blue), var(--cb-task-purple)) !important;
    box-shadow: 0 14px 28px rgba(47, 135, 238, .22) !important;
}

html.combeat-page-index.combeat-top-frame .stage {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

html.combeat-page-index.combeat-top-frame iframe,
html.combeat-page-index.combeat-top-frame iframe.active {
    background: transparent !important;
}

html.combeat-page-index.combeat-top-frame .status-bar {
    display: none !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-inspiration, .combeat-page-login, .combeat-page-admin, .combeat-page-account):not(.combeat-embedded-frame) body {
    background: var(--cb-page-bg) fixed !important;
    color: var(--cb-task-text) !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) .container-box,
html.combeat-page-zimage .layout-container,
html.combeat-page-inspiration .shell,
html.combeat-page-gpt-chat .topbar-inner,
html.combeat-page-gpt-chat .messages,
html.combeat-page-gpt-chat .composer {
    max-width: 1320px !important;
}

html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) .container-box {
    margin-top: 0 !important;
    padding: clamp(34px, 5vw, 70px) clamp(28px, 4.8vw, 66px) 80px !important;
}

html.combeat-page-zimage header {
    padding-top: clamp(34px, 5vw, 70px) !important;
    padding-bottom: 36px !important;
}

html.combeat-page-inspiration .shell {
    padding: clamp(26px, 4vw, 52px) clamp(28px, 4.8vw, 64px) 56px !important;
}

html.combeat-page-gpt-chat .topbar {
    height: 92px !important;
    background: rgba(20, 22, 27, .86) !important;
    border-bottom: 1px solid var(--cb-task-line) !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
}

html.combeat-page-gpt-chat .messages {
    padding-top: 34px !important;
    background: transparent !important;
}

html.combeat-page-gpt-chat .composer-wrap {
    background: linear-gradient(to top, rgba(20, 22, 27, .96) 72%, rgba(20, 22, 27, 0)) !important;
}

html.combeat-page-inspiration .topbar {
    position: sticky !important;
    top: 0 !important;
    min-height: 72px !important;
    padding: 0 0 22px !important;
    background: linear-gradient(to bottom, rgba(20, 22, 27, .96), rgba(20, 22, 27, 0)) !important;
    border: 0 !important;
    backdrop-filter: blur(18px) saturate(1.04) !important;
}

html.combeat-page-inspiration .search {
    width: min(500px, 100%) !important;
}

html.combeat-page-inspiration .search input,
html.combeat-page-admin .toolbar .search input,
html.combeat-page-account input[type="search"],
html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-login, .combeat-page-admin, .combeat-page-account) :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    textarea,
    select,
    .input,
    .nano-input,
    .size-select,
    .provider-select,
    .select-lite,
    .size-custom
) {
    min-height: 44px !important;
    border: 1px solid var(--cb-task-line) !important;
    border-radius: var(--cb-task-radius-md) !important;
    background: rgba(27, 29, 37, .88) !important;
    color: var(--cb-task-text) !important;
    outline: none !important;
    box-shadow: var(--cb-task-inset), 0 10px 24px rgba(0, 0, 0, .12) !important;
}

html.combeat-page-inspiration .search input {
    height: 54px !important;
    border-radius: 28px !important;
    padding-left: 54px !important;
    background: rgba(27, 29, 37, .94) !important;
    box-shadow: var(--cb-task-inset), 0 16px 38px rgba(0, 0, 0, .20) !important;
}

html.combeat-page-inspiration .search [data-lucide] {
    left: 20px !important;
    width: 22px !important;
    height: 22px !important;
    color: #ffffff !important;
    opacity: .92 !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-login, .combeat-page-admin, .combeat-page-account) :is(input, textarea)::placeholder {
    color: rgba(216, 220, 234, .34) !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-inspiration, .combeat-page-login, .combeat-page-admin, .combeat-page-account) :is(
    .console-card,
    .console-card > div,
    .tool-panel,
    .control-panel,
    .result-frame,
    .engine-panel,
    .z-param-panel,
    .composer,
    .composer-body,
    .history-popover,
    .thread-item,
    .setting-row,
    .notice-card,
    .record-card,
    .stat-card,
    .upload-item,
    .auth-card,
    .site-info-dialog,
    .modal-card,
    .lightbox-card,
    #lightboxCard,
    .panel,
    .card:not(.masonry .card),
    .table-wrap,
    .profile-mini,
    .ad-wrap
),
html.combeat-embedded-frame:not(.combeat-page-canvas) :is(
    .console-card,
    .console-card > div,
    .tool-panel,
    .control-panel,
    .result-frame,
    .engine-panel,
    .z-param-panel,
    .composer,
    .composer-body,
    .history-popover,
    .thread-item,
    .setting-row,
    .notice-card,
    .record-card,
    .stat-card,
    .upload-item,
    .auth-card,
    .site-info-dialog,
    .modal-card,
    .lightbox-card,
    #lightboxCard,
    .panel,
    .card:not(.masonry .card),
    .table-wrap,
    .profile-mini,
    .ad-wrap
) {
    background:
        radial-gradient(circle at 92% 16%, rgba(116, 89, 232, .075), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .014)),
        var(--cb-task-panel) !important;
    border: 1px solid var(--cb-task-line) !important;
    border-radius: var(--cb-task-radius-lg) !important;
    box-shadow: var(--cb-task-shadow-soft), var(--cb-task-inset) !important;
    backdrop-filter: blur(18px) saturate(1.06) !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat) :is(
    .mode-switcher,
    .model-pill,
    .provider-switch,
    .mode-switch,
    .mini-ratio,
    .resolution-toggle,
    .model-badge-slot .cb-model-badges
) {
    background: rgba(26, 28, 36, .92) !important;
    border: 1px solid var(--cb-task-line) !important;
    border-radius: var(--cb-task-radius-md) !important;
    box-shadow: var(--cb-task-inset) !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat) :is(
    .model-option,
    .provider-switch button,
    .mode-switch button,
    .mini-ratio button,
    .resolution-option,
    .mode-btn
) {
    color: var(--cb-task-muted) !important;
    border-radius: var(--cb-task-radius-sm) !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat) :is(
    .model-option.active,
    .provider-switch button.active,
    .mode-switch button.active,
    .mini-ratio button.active,
    .resolution-option.active,
    .mode-btn.active
) {
    color: #ffffff !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .055)) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.18), var(--cb-task-inset) !important;
}

html.combeat-page-zimage .z-param-panel {
    margin: 18px 18px 20px !important;
    padding: 18px !important;
    border-radius: var(--cb-task-radius-lg) !important;
}

html.combeat-page-zimage .console-card > div {
    border-radius: calc(var(--cb-task-radius-lg) - 4px) !important;
}

html.combeat-page-online .result-frame,
html.combeat-page-zimage .console-card,
html.combeat-page-enhance .result-frame,
html.combeat-page-klein .result-frame,
html.combeat-page-angle .result-frame {
    min-height: 500px !important;
}

html.combeat-page-inspiration .ad-wrap {
    min-height: 260px !important;
    height: clamp(240px, 25vw, 360px) !important;
    border-radius: var(--cb-task-radius-xl) !important;
    overflow: hidden !important;
}

html.combeat-page-inspiration .ad-slide {
    background: var(--cb-task-panel) !important;
}

html.combeat-page-inspiration .ad-slide.has-image::before {
    opacity: .34 !important;
    filter: blur(22px) saturate(1.18) !important;
}

html.combeat-page-inspiration .ad-slide.has-image::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background: linear-gradient(90deg, rgba(17, 18, 24, .62), rgba(17, 18, 24, .18) 52%, rgba(17, 18, 24, .40)) !important;
    pointer-events: none !important;
}

html.combeat-page-inspiration .ad-slide img {
    object-fit: cover !important;
    opacity: .92 !important;
}

html.combeat-page-inspiration .ad-copy {
    left: 34px !important;
    right: 34px !important;
    bottom: 30px !important;
}

html.combeat-page-inspiration .ad-title {
    color: #ffffff !important;
    font-size: clamp(30px, 3.2vw, 46px) !important;
    letter-spacing: -.035em !important;
    text-shadow: 0 12px 34px rgba(0, 0, 0, .42) !important;
}

html.combeat-page-inspiration .ad-text {
    color: rgba(255,255,255,.78) !important;
}

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

html.combeat-page-inspiration .masonry .card {
    border: 1px solid var(--cb-task-line) !important;
    border-radius: var(--cb-task-radius-lg) !important;
    background: var(--cb-task-panel) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.24), var(--cb-task-inset) !important;
    overflow: hidden !important;
}

html.combeat-page-inspiration .masonry .card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--cb-task-line-2) !important;
    box-shadow: 0 26px 62px rgba(0,0,0,.34), var(--cb-task-inset) !important;
}

html.combeat-page-inspiration .masonry .media-frame,
html.combeat-page-inspiration .masonry .card img,
html.combeat-page-inspiration .masonry .card video {
    border-radius: calc(var(--cb-task-radius-lg) - 1px) !important;
}

html.combeat-page-inspiration .card-body {
    background: linear-gradient(to top, rgba(11, 12, 17, .88), rgba(11, 12, 17, .46) 56%, transparent) !important;
}

.btn,
.glass-btn,
.btn-render,
.gen-btn,
.comfy-run,
.send-btn,
.action-btn.primary,
.publish-inspiration-btn,
.load-trigger,
button.primary,
.primary-btn,
.site-info-link,
.same-style-btn {
    border: 0 !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, #3a94f5 0%, var(--cb-task-blue-2) 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 18px 38px rgba(47, 135, 238, .30), inset 0 1px 0 rgba(255,255,255,.28) !important;
    text-shadow: none !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease !important;
}

.btn:hover,
.glass-btn:hover,
.btn-render:hover,
.gen-btn:hover,
.comfy-run:hover,
.send-btn:hover,
.action-btn.primary:hover,
.publish-inspiration-btn:hover,
.load-trigger:hover,
button.primary:hover,
.primary-btn:hover,
.site-info-link:hover,
.same-style-btn:hover {
    transform: translateY(-2px) !important;
    background: linear-gradient(180deg, #48a0ff 0%, #237fe8 100%) !important;
    box-shadow: 0 24px 48px rgba(47, 135, 238, .36), inset 0 1px 0 rgba(255,255,255,.34) !important;
}

.action-btn:not(.primary),
.copy-btn,
.replicate-btn,
.thread-delete,
.peek-btn,
.theme-float,
.site-info-close,
.site-info-arrow,
button.mini,
.btn.mini {
    border: 1px solid var(--cb-task-line) !important;
    border-radius: var(--cb-task-radius-md) !important;
    background: rgba(31, 33, 41, .86) !important;
    color: var(--cb-task-text) !important;
    box-shadow: var(--cb-task-inset), 0 10px 24px rgba(0,0,0,.14) !important;
}

.action-btn:not(.primary):hover,
.copy-btn:hover,
.replicate-btn:hover,
.thread-delete:hover,
.peek-btn:hover,
.theme-float:hover,
.site-info-close:hover,
.site-info-arrow:hover,
button.mini:hover,
.btn.mini:hover {
    background: rgba(42, 45, 56, .96) !important;
    border-color: var(--cb-task-line-2) !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-inspiration, .combeat-page-login, .combeat-page-admin, .combeat-page-account) :is(
    h1, h2, h3, .title, .section-title, .top-title h1, .card-title, .brand-name, .profile-name
) {
    color: #ffffff !important;
    letter-spacing: 0 !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-inspiration, .combeat-page-login, .combeat-page-admin, .combeat-page-account) :is(
    p, span, label, small, .subtitle, .brand-sub, .muted, .field-note, .engine-hint, .card-prompt
) {
    color: inherit;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-inspiration, .combeat-page-login, .combeat-page-admin, .combeat-page-account) :is(
    .text-gray-300, .text-gray-400, .text-gray-500, .text-slate-400, .text-slate-500, .control-label, .z-param-label
) {
    color: var(--cb-task-muted) !important;
}

html.combeat-page-gpt-chat .bubble.user {
    background: linear-gradient(180deg, #3a94f5, #237fe8) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 34px rgba(47,135,238,.24) !important;
}

html.combeat-page-gpt-chat .bubble.assistant {
    background: var(--cb-task-panel) !important;
    border-color: var(--cb-task-line) !important;
    color: var(--cb-task-text) !important;
}

html.combeat-page-gpt-chat .send-cost-label {
    background: rgba(31, 33, 41, .86) !important;
    color: var(--cb-task-muted) !important;
    border-color: var(--cb-task-line) !important;
    border-radius: var(--cb-task-radius-md) !important;
}

html.combeat-page-admin .shell,
html.combeat-page-account .shell {
    background: transparent !important;
    grid-template-columns: 260px minmax(0, 1fr) !important;
}

html.combeat-page-admin .sidebar,
html.combeat-page-account .sidebar {
    width: auto !important;
    min-width: 0 !important;
    height: 100vh !important;
    padding: 20px 14px !important;
    border: 0 !important;
    border-right: 1px solid var(--cb-task-line) !important;
    border-radius: 0 28px 28px 0 !important;
    background: rgba(29, 31, 39, .96) !important;
    box-shadow: 14px 0 36px rgba(0,0,0,.16), var(--cb-task-inset) !important;
}

html.combeat-page-admin .brand,
html.combeat-page-account .brand {
    min-height: 56px !important;
}

html.combeat-page-admin .brand img,
html.combeat-page-account .brand img,
html.combeat-page-login .brand-mark img {
    object-fit: contain !important;
    filter: drop-shadow(0 10px 24px rgba(47,135,238,.22)) !important;
}

html.combeat-page-admin .brand img {
    width: 46px !important;
    height: 46px !important;
    border-radius: 0 !important;
}

html.combeat-page-account .brand img,
html.combeat-page-login .brand-mark img {
    width: 48px !important;
    height: 48px !important;
}

html.combeat-page-admin .nav-btn,
html.combeat-page-account .nav-btn,
html.combeat-page-account .pill,
html.combeat-page-admin .side-pill {
    border: 1px solid transparent !important;
    border-radius: var(--cb-task-radius-md) !important;
    background: transparent !important;
    color: var(--cb-task-muted) !important;
}

html.combeat-page-admin .nav-btn:hover,
html.combeat-page-account .nav-btn:hover,
html.combeat-page-admin .side-pill:hover {
    background: rgba(255,255,255,.055) !important;
    color: #ffffff !important;
}

html.combeat-page-admin .nav-btn.active,
html.combeat-page-account .nav-btn.active {
    background: linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.055)) !important;
    border-color: var(--cb-task-line) !important;
    color: #ffffff !important;
}

html.combeat-page-admin .topbar,
html.combeat-page-account .topbar {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html.combeat-page-admin table,
html.combeat-page-account table {
    color: var(--cb-task-text) !important;
}

html.combeat-page-admin th,
html.combeat-page-admin td,
html.combeat-page-account th,
html.combeat-page-account td {
    border-color: var(--cb-task-line) !important;
}

html.combeat-page-login body {
    background:
        radial-gradient(circle at 76% 18%, rgba(97, 74, 172, .16), transparent 34%),
        radial-gradient(circle at 22% 82%, rgba(47, 135, 238, .14), transparent 36%),
        linear-gradient(135deg, #15171d, #101217) !important;
}

html.combeat-page-login body::before {
    opacity: .18 !important;
    filter: blur(20px) saturate(1.08) !important;
}

html.combeat-page-login body::after {
    background: rgba(12, 14, 19, .34) !important;
    backdrop-filter: blur(12px) !important;
}

html.combeat-page-login.embedded-auth {
    --bg-0: transparent;
    --bg-1: transparent;
}

html.combeat-page-login.embedded-auth body,
html.combeat-page-login.embedded-auth body::before,
html.combeat-page-login.embedded-auth body::after {
    background: transparent !important;
}

html.combeat-page-login .auth-card {
    width: min(500px, 100%) !important;
    padding: 26px !important;
    border-radius: var(--cb-task-radius-lg) !important;
}

html.combeat-page-login.embedded-auth .auth-card {
    background:
        radial-gradient(circle at 82% 10%, rgba(22, 140, 255, .12), transparent 34%),
        linear-gradient(180deg, rgba(35,35,53,.96), rgba(22,22,36,.92)) !important;
    box-shadow: 0 18px 46px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

html.combeat-page-login .brand {
    justify-content: center !important;
    margin-bottom: 20px !important;
}

html.combeat-page-login .brand-mark {
    width: 62px !important;
    height: 62px !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

html.combeat-page-login .tabs,
html.combeat-page-login .switch-row {
    background: rgba(27, 29, 37, .86) !important;
    border: 1px solid var(--cb-task-line) !important;
    border-radius: var(--cb-task-radius-md) !important;
    box-shadow: var(--cb-task-inset) !important;
}

html.combeat-page-login .tabs button.active,
html.combeat-page-login .switch-row button.active {
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.055)) !important;
    color: #ffffff !important;
}

html.combeat-page-canvas,
html.combeat-page-canvas body,
html.combeat-page-canvas.combeat-embedded-frame,
html.combeat-page-canvas.combeat-embedded-frame body {
    background: #101217 !important;
}

html.combeat-page-canvas .topbar,
html.combeat-page-canvas .panel,
html.combeat-page-canvas .gate-panel,
html.combeat-page-canvas .node {
    background: var(--cb-task-panel) !important;
    border-color: var(--cb-task-line) !important;
    box-shadow: var(--cb-task-shadow-soft), var(--cb-task-inset) !important;
}

* {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(196, 210, 242, .26) transparent !important;
}

*::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
    background: transparent !important;
}

*::-webkit-scrollbar-track {
    background: transparent !important;
}

*::-webkit-scrollbar-thumb {
    min-height: 38px !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background: rgba(196, 210, 242, .22) !important;
    background-clip: padding-box !important;
}

*:hover::-webkit-scrollbar-thumb {
    background: rgba(196, 210, 242, .34) !important;
    background-clip: padding-box !important;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(196, 210, 242, .50) !important;
    background-clip: padding-box !important;
}

@media (max-width: 900px) {
    html.combeat-page-index.combeat-top-frame .sidebar {
        width: 84px !important;
        min-width: 84px !important;
        padding-inline: 10px !important;
        border-radius: 0 24px 24px 0 !important;
    }
    html.combeat-page-index.combeat-top-frame .brand {
        width: 60px !important;
        margin-bottom: 24px !important;
    }
    html.combeat-page-index.combeat-top-frame .nav-item,
    html.combeat-page-index.combeat-top-frame .side-btn {
        width: 52px !important;
        height: 52px !important;
        flex-basis: 52px !important;
    }
    html.combeat-page-index.combeat-top-frame .nav-item.active::after {
        left: -10px !important;
    }
}

@media (max-width: 760px) {
    html.combeat-page-index.combeat-top-frame .app-shell {
        flex-direction: column !important;
    }
    html.combeat-page-index.combeat-top-frame .sidebar {
        width: 100% !important;
        min-width: 0 !important;
        height: 82px !important;
        flex-direction: row !important;
        border-radius: 0 0 24px 24px !important;
        border-right: 0 !important;
        border-bottom: 1px solid var(--cb-task-line) !important;
        padding: 10px 12px !important;
        gap: 8px !important;
    }
    html.combeat-page-index.combeat-top-frame .brand {
        width: 58px !important;
        height: 58px !important;
        flex: 0 0 58px !important;
        margin: 0 !important;
    }
    html.combeat-page-index.combeat-top-frame .nav {
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 8px !important;
    }
    html.combeat-page-index.combeat-top-frame .side-actions {
        width: auto !important;
        flex-direction: row !important;
        border-top: 0 !important;
        padding-top: 0 !important;
        margin: 0 !important;
        gap: 6px !important;
    }
    html.combeat-page-index.combeat-top-frame .nav-item.active::after {
        left: 50% !important;
        top: auto !important;
        bottom: -8px !important;
        width: 34px !important;
        height: 3px !important;
        transform: translateX(-50%) !important;
    }
    html.combeat-page-admin .shell,
    html.combeat-page-account .shell {
        grid-template-columns: 1fr !important;
    }
    html.combeat-page-admin .sidebar,
    html.combeat-page-account .sidebar {
        height: auto !important;
        border-radius: 0 0 24px 24px !important;
        border-right: 0 !important;
        border-bottom: 1px solid var(--cb-task-line) !important;
    }
}

/* 2026-05-23 final finance-dashboard reference skin. */
:root {
    --cb-fin-bg: #1b1928;
    --cb-fin-bg-2: #181624;
    --cb-fin-rail: #1d1b2a;
    --cb-fin-panel: rgba(33, 34, 50, .86);
    --cb-fin-panel-2: rgba(39, 41, 59, .82);
    --cb-fin-panel-3: rgba(27, 28, 43, .72);
    --cb-fin-line: rgba(152, 158, 193, .14);
    --cb-fin-line-strong: rgba(168, 176, 215, .24);
    --cb-fin-text: #fbfbff;
    --cb-fin-muted: rgba(217, 220, 238, .54);
    --cb-fin-faint: rgba(199, 204, 226, .34);
    --cb-fin-blue: #168cff;
    --cb-fin-blue-2: #0c7ff4;
    --cb-fin-purple: #7c59df;
    --cb-fin-pink: #e33d94;
    --cb-fin-teal: #25d2c7;
    --cb-fin-green: #25df74;
    --cb-fin-radius-xl: 34px;
    --cb-fin-radius-lg: 28px;
    --cb-fin-radius-md: 20px;
    --cb-fin-radius-sm: 15px;
    --cb-fin-shadow: 0 30px 76px rgba(0, 0, 0, .32);
    --cb-fin-shadow-soft: 0 18px 44px rgba(0, 0, 0, .24);
    --cb-fin-inset: inset 0 1px 0 rgba(255, 255, 255, .055);
    --cb-page-bg:
        radial-gradient(circle at 70% 58%, rgba(38, 47, 78, .20) 0%, transparent 42%),
        radial-gradient(circle at 22% 26%, rgba(44, 65, 92, .12) 0%, transparent 32%),
        linear-gradient(135deg, var(--cb-fin-bg) 0%, var(--cb-fin-bg-2) 100%) !important;
    color-scheme: dark;
}

html,
body,
html.studio-theme-dark,
html.studio-theme-dark body,
body.studio-theme-dark,
html:not(.studio-theme-dark),
html:not(.studio-theme-dark) body {
    background: var(--cb-page-bg) fixed !important;
    color: var(--cb-fin-text) !important;
}

html.combeat-embedded-frame:not(.combeat-page-canvas),
html.combeat-embedded-frame:not(.combeat-page-canvas) body {
    background: transparent !important;
    color: var(--cb-fin-text) !important;
}

html.combeat-page-index.combeat-top-frame body {
    background: var(--cb-page-bg) fixed !important;
}

html.combeat-page-index.combeat-top-frame .app-shell {
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--cb-page-bg) fixed !important;
}

html.combeat-page-index.combeat-top-frame .sidebar {
    width: 94px !important;
    min-width: 94px !important;
    padding: 22px 0 18px !important;
    border-radius: 0 !important;
    border-right: 1px solid rgba(154, 161, 198, .13) !important;
    background: linear-gradient(180deg, #1d1b2a 0%, #191725 100%) !important;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .025) !important;
    gap: 0 !important;
}

html.combeat-page-index.combeat-top-frame .brand {
    width: 100% !important;
    height: 62px !important;
    margin: 0 0 98px !important;
}

html.combeat-page-index.combeat-top-frame .brand-mark {
    width: 50px !important;
    height: 50px !important;
}

html.combeat-page-index.combeat-top-frame .brand-mark img {
    width: 44px !important;
    height: 44px !important;
    filter: drop-shadow(0 14px 26px rgba(22, 140, 255, .28)) !important;
}

html.combeat-page-index.combeat-top-frame .nav {
    gap: 24px !important;
    padding: 0 !important;
}

html.combeat-page-index.combeat-top-frame .side-actions {
    gap: 21px !important;
    margin-top: auto !important;
    padding: 22px 0 0 !important;
    border-top: 1px solid rgba(154, 161, 198, .10) !important;
}

html.combeat-page-index.combeat-top-frame .nav-item,
html.combeat-page-index.combeat-top-frame .side-btn {
    width: 58px !important;
    height: 50px !important;
    flex: 0 0 50px !important;
    border-radius: 999px !important;
    color: rgba(214, 220, 243, .48) !important;
}

html.combeat-page-index.combeat-top-frame .nav-item::before,
html.combeat-page-index.combeat-top-frame .side-btn::before {
    inset: 2px 6px !important;
    background: rgba(255, 255, 255, .045) !important;
}

html.combeat-page-index.combeat-top-frame .nav-item:hover,
html.combeat-page-index.combeat-top-frame .side-btn:hover,
html.combeat-page-index.combeat-top-frame .nav-item.active {
    color: #fff !important;
}

html.combeat-page-index.combeat-top-frame .nav-item.active::after {
    left: auto !important;
    right: -18px !important;
    width: 3px !important;
    height: 50px !important;
    background: #fff !important;
    box-shadow: 0 0 18px rgba(255,255,255,.44) !important;
}

html.combeat-page-index.combeat-top-frame .nav-item svg,
html.combeat-page-index.combeat-top-frame .side-btn svg {
    width: 25px !important;
    height: 25px !important;
    stroke-width: 2.15 !important;
}

html.combeat-page-index.combeat-top-frame .stage {
    background: transparent !important;
}

html.combeat-page-index.combeat-top-frame .stage::before {
    content: "" !important;
    position: absolute !important;
    left: 58px !important;
    right: 36px !important;
    top: 82px !important;
    height: 1px !important;
    background: rgba(154, 161, 198, .13) !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-inspiration, .combeat-page-login, .combeat-page-admin, .combeat-page-account):not(.combeat-embedded-frame) body {
    background: var(--cb-page-bg) fixed !important;
}

html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) .container-box,
html.combeat-page-zimage .layout-container,
html.combeat-page-inspiration .shell {
    max-width: 1500px !important;
}

html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) .container-box {
    padding: 116px clamp(34px, 5vw, 72px) 86px !important;
}

html.combeat-page-zimage header {
    padding-top: 116px !important;
}

html.combeat-page-inspiration .shell {
    padding: 28px clamp(34px, 4.4vw, 58px) 62px !important;
}

html.combeat-page-inspiration .topbar {
    height: 72px !important;
    min-height: 72px !important;
    padding: 0 0 20px !important;
    justify-content: center !important;
    border-bottom: 1px solid rgba(154, 161, 198, .13) !important;
    background: linear-gradient(to bottom, rgba(27, 25, 40, .96) 0%, rgba(27, 25, 40, .72) 68%, rgba(27, 25, 40, 0) 100%) !important;
}

html.combeat-page-inspiration .search {
    width: min(480px, 42vw) !important;
    margin: 0 auto !important;
}

html.combeat-page-inspiration .search input {
    height: 48px !important;
    padding-left: 54px !important;
    border-radius: 999px !important;
    background: rgba(35, 36, 54, .76) !important;
    border: 1px solid rgba(154, 161, 198, .16) !important;
    color: #fff !important;
    box-shadow: var(--cb-fin-inset), 0 18px 44px rgba(0,0,0,.18) !important;
}

html.combeat-page-inspiration .search [data-lucide] {
    left: 20px !important;
    color: #ffffff !important;
    opacity: .92 !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-login, .combeat-page-admin, .combeat-page-account) :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    textarea,
    select,
    .input,
    .nano-input,
    .size-select,
    .provider-select,
    .select-lite,
    .size-custom
) {
    border-radius: var(--cb-fin-radius-md) !important;
    border: 1px solid rgba(154, 161, 198, .16) !important;
    background: rgba(32, 33, 50, .82) !important;
    color: #fff !important;
    box-shadow: var(--cb-fin-inset), 0 12px 26px rgba(0,0,0,.14) !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-login, .combeat-page-admin, .combeat-page-account) :is(input, textarea)::placeholder {
    color: rgba(217, 220, 238, .34) !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-inspiration, .combeat-page-login, .combeat-page-admin, .combeat-page-account) :is(
    .console-card,
    .console-card > div,
    .tool-panel,
    .control-panel,
    .result-frame,
    .engine-panel,
    .z-param-panel,
    .composer,
    .composer-body,
    .history-popover,
    .thread-item,
    .setting-row,
    .notice-card,
    .record-card,
    .stat-card,
    .upload-item,
    .auth-card,
    .site-info-dialog,
    .modal-card,
    .lightbox-card,
    #lightboxCard,
    .panel,
    .card:not(.masonry .card),
    .table-wrap,
    .profile-mini,
    .ad-wrap
) {
    background:
        radial-gradient(circle at 78% 80%, rgba(22, 140, 255, .055), transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,.040), rgba(255,255,255,.014)),
        var(--cb-fin-panel) !important;
    border: 1px solid var(--cb-fin-line) !important;
    border-radius: var(--cb-fin-radius-lg) !important;
    box-shadow: var(--cb-fin-shadow-soft), var(--cb-fin-inset) !important;
}

html.combeat-page-inspiration .ad-wrap {
    height: clamp(256px, 23vw, 350px) !important;
    margin: 52px 0 24px !important;
    border-radius: var(--cb-fin-radius-xl) !important;
}

html.combeat-page-inspiration .ad-slide.has-image::after {
    background: linear-gradient(90deg, rgba(19, 19, 30, .68), rgba(19, 19, 30, .16) 54%, rgba(19, 19, 30, .38)) !important;
}

html.combeat-page-inspiration .ad-slide img {
    object-fit: contain !important;
    padding: clamp(18px, 3vw, 42px) !important;
}

html.combeat-page-inspiration .ad-fallback {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    background:
        radial-gradient(circle at 65% 48%, rgba(22, 140, 255, .34), transparent 22%),
        radial-gradient(circle at 24% 66%, rgba(37, 210, 199, .16), transparent 34%),
        linear-gradient(135deg, rgba(25, 31, 48, .94), rgba(20, 23, 37, .96)) !important;
    color: transparent !important;
}

html.combeat-page-inspiration .ad-fallback::before {
    content: "" !important;
    position: absolute !important;
    right: clamp(80px, 18vw, 280px) !important;
    top: 50% !important;
    width: clamp(150px, 18vw, 260px) !important;
    aspect-ratio: 1 !important;
    transform: translateY(-50%) rotate(-7deg) !important;
    background: url("/static/logo.svg") center / contain no-repeat !important;
    filter: drop-shadow(0 24px 54px rgba(22, 140, 255, .30)) !important;
    opacity: .92 !important;
}

html.combeat-page-inspiration .ad-fallback::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        linear-gradient(90deg, rgba(19, 19, 30, .62), transparent 52%, rgba(19, 19, 30, .24)),
        repeating-radial-gradient(circle at 61% 50%, rgba(255,255,255,.18) 0 1px, transparent 2px 14px) !important;
    opacity: .34 !important;
}

html.combeat-page-inspiration .ad-title {
    font-size: clamp(28px, 3vw, 42px) !important;
    color: #fff !important;
}

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

html.combeat-page-inspiration .masonry .card {
    border-radius: 26px !important;
    border: 1px solid rgba(154, 161, 198, .13) !important;
    background: rgba(31, 32, 48, .76) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.24), var(--cb-fin-inset) !important;
}

html.combeat-page-inspiration .masonry .media-frame,
html.combeat-page-inspiration .masonry .card img,
html.combeat-page-inspiration .masonry .card video {
    border-radius: 25px !important;
}

html.combeat-page-inspiration .copy-btn,
html.combeat-page-inspiration .replicate-btn {
    border-radius: 15px !important;
    background: rgba(27, 28, 43, .72) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    backdrop-filter: blur(14px) !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat) :is(
    .mode-switcher,
    .model-pill,
    .provider-switch,
    .mode-switch,
    .mini-ratio,
    .resolution-toggle
) {
    border-radius: 18px !important;
    background: rgba(30, 31, 47, .86) !important;
    border: 1px solid rgba(154, 161, 198, .15) !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat) :is(
    .model-option.active,
    .provider-switch button.active,
    .mode-switch button.active,
    .mini-ratio button.active,
    .resolution-option.active,
    .mode-btn.active
) {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
}

.btn,
.glass-btn,
.btn-render,
.gen-btn,
.comfy-run,
.send-btn,
.action-btn.primary,
.publish-inspiration-btn,
.load-trigger,
button.primary,
.primary-btn,
.site-info-link {
    border: 0 !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, #2199ff 0%, var(--cb-fin-blue) 100%) !important;
    color: #fff !important;
    box-shadow: 0 18px 40px rgba(22, 140, 255, .30), inset 0 1px 0 rgba(255,255,255,.28) !important;
}

.btn:hover,
.glass-btn:hover,
.btn-render:hover,
.gen-btn:hover,
.comfy-run:hover,
.send-btn:hover,
.action-btn.primary:hover,
.publish-inspiration-btn:hover,
.load-trigger:hover,
button.primary:hover,
.primary-btn:hover,
.site-info-link:hover {
    background: linear-gradient(180deg, #45adff 0%, #0c7ff4 100%) !important;
    box-shadow: 0 23px 48px rgba(22, 140, 255, .36), inset 0 1px 0 rgba(255,255,255,.34) !important;
}

.action-btn:not(.primary),
.copy-btn,
.replicate-btn,
.thread-delete,
.peek-btn,
.theme-float,
.site-info-close,
.site-info-arrow,
button.mini,
.btn.mini {
    border-radius: 18px !important;
    border: 1px solid var(--cb-fin-line) !important;
    background: rgba(39, 41, 59, .78) !important;
    color: var(--cb-fin-text) !important;
    box-shadow: var(--cb-fin-inset), 0 12px 26px rgba(0,0,0,.16) !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-inspiration, .combeat-page-login, .combeat-page-admin, .combeat-page-account) :is(h1, h2, h3, .title, .section-title, .top-title h1, .card-title, .brand-name, .profile-name) {
    color: #fff !important;
    text-shadow: 0 10px 28px rgba(0,0,0,.22) !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-inspiration, .combeat-page-login, .combeat-page-admin, .combeat-page-account) :is(.text-gray-300, .text-gray-400, .text-gray-500, .text-slate-400, .text-slate-500, .control-label, .z-param-label, .subtitle, .brand-sub, .engine-hint) {
    color: var(--cb-fin-muted) !important;
}

html.combeat-page-gpt-chat .topbar {
    height: 86px !important;
    background: rgba(27, 25, 40, .84) !important;
    border-bottom: 1px solid rgba(154, 161, 198, .13) !important;
}

html.combeat-page-gpt-chat .composer-wrap {
    background: linear-gradient(to top, rgba(27, 25, 40, .96) 74%, rgba(27, 25, 40, 0)) !important;
}

html.combeat-page-gpt-chat .bubble.user {
    background: linear-gradient(180deg, #2199ff, #0c7ff4) !important;
}

html.combeat-page-gpt-chat .bubble.assistant {
    background: var(--cb-fin-panel) !important;
    border-color: var(--cb-fin-line) !important;
}

html.combeat-page-login .auth-card {
    border-radius: 28px !important;
}

html.combeat-page-login .brand-mark {
    background: transparent !important;
}

html.combeat-page-login .brand-mark img {
    width: 54px !important;
    height: 54px !important;
}

html.combeat-page-admin .sidebar,
html.combeat-page-account .sidebar {
    border-radius: 0 !important;
    background: linear-gradient(180deg, #1d1b2a, #191725) !important;
}

html.combeat-page-admin .nav-btn.active,
html.combeat-page-account .nav-btn.active {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
}

@media (max-width: 760px) {
    html.combeat-page-index.combeat-top-frame .sidebar {
        border-radius: 0 !important;
    }
    html.combeat-page-index.combeat-top-frame .brand {
        margin: 0 !important;
    }
    html.combeat-page-index.combeat-top-frame .nav-item.active::after {
        right: auto !important;
        bottom: -8px !important;
    }
    html.combeat-page-inspiration .search {
        width: 100% !important;
    }
}

/* Combeat finance reference polish, final cascade */
:root {
    --cb-ref-bg: #191827;
    --cb-ref-bg-2: #131321;
    --cb-ref-rail: #171624;
    --cb-ref-panel: rgba(33, 34, 51, .90);
    --cb-ref-panel-2: rgba(39, 40, 60, .82);
    --cb-ref-card: rgba(35, 36, 54, .86);
    --cb-ref-line: rgba(154, 161, 198, .13);
    --cb-ref-line-strong: rgba(185, 194, 230, .22);
    --cb-ref-text: #fbfbff;
    --cb-ref-muted: #9b9aaf;
    --cb-ref-faint: #6f7087;
    --cb-ref-blue: #168cff;
    --cb-ref-blue-2: #36a8ff;
    --cb-ref-pink: #ec3d9a;
    --cb-ref-cyan: #38e2d0;
    --cb-ref-green: #28df9a;
    --cb-ref-radius: 24px;
    --cb-ref-radius-sm: 16px;
    --cb-ref-shadow: 0 28px 78px rgba(0, 0, 0, .34);
    --cb-ref-shadow-soft: 0 18px 46px rgba(0, 0, 0, .24);
    --cb-ref-inset: inset 0 1px 0 rgba(255,255,255,.08);
}

html:not(.studio-theme-dark) {
    --cb-ref-bg: #eff5ff;
    --cb-ref-bg-2: #e5eefb;
    --cb-ref-rail: rgba(255,255,255,.56);
    --cb-ref-panel: rgba(255,255,255,.84);
    --cb-ref-panel-2: rgba(255,255,255,.72);
    --cb-ref-card: rgba(255,255,255,.86);
    --cb-ref-line: rgba(15, 23, 42, .10);
    --cb-ref-line-strong: rgba(15, 23, 42, .18);
    --cb-ref-text: #121827;
    --cb-ref-muted: #647083;
    --cb-ref-faint: #8a96aa;
    --cb-ref-shadow: 0 24px 70px rgba(25, 52, 88, .14);
    --cb-ref-shadow-soft: 0 16px 42px rgba(25, 52, 88, .10);
    --cb-ref-inset: inset 0 1px 0 rgba(255,255,255,.70);
}

body,
html.studio-theme-dark body,
body.studio-theme-dark {
    background:
        radial-gradient(circle at 88% 7%, rgba(22, 140, 255, .11), transparent 28%),
        radial-gradient(circle at 22% 14%, rgba(236, 61, 154, .08), transparent 32%),
        linear-gradient(180deg, var(--cb-ref-bg) 0%, var(--cb-ref-bg-2) 100%) !important;
    color: var(--cb-ref-text) !important;
}

html:not(.studio-theme-dark) body {
    background:
        radial-gradient(circle at 88% 7%, rgba(22, 140, 255, .16), transparent 30%),
        radial-gradient(circle at 18% 12%, rgba(56, 226, 208, .14), transparent 34%),
        linear-gradient(180deg, var(--cb-ref-bg) 0%, var(--cb-ref-bg-2) 100%) !important;
}

html.combeat-page-index.combeat-top-frame .app-shell {
    background: transparent !important;
}

html.combeat-page-index.combeat-top-frame .sidebar {
    width: 88px !important;
    min-width: 88px !important;
    padding: 16px 10px 18px !important;
    background: linear-gradient(180deg, rgba(24, 23, 36, .88), rgba(20, 20, 32, .68)) !important;
    border-right: 1px solid rgba(255,255,255,.055) !important;
    box-shadow: none !important;
    overflow: visible !important;
    gap: 10px !important;
}

html:not(.studio-theme-dark).combeat-page-index.combeat-top-frame .sidebar {
    background: rgba(255,255,255,.34) !important;
    border-right-color: rgba(15,23,42,.08) !important;
}

html.combeat-page-index.combeat-top-frame .brand {
    width: 68px !important;
    height: 60px !important;
    margin: 0 0 8px !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    background: transparent !important;
}

html.combeat-page-index.combeat-top-frame .brand-mark,
html.combeat-page-admin .brand,
html.combeat-page-account .brand img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 17px !important;
    background: #f7fbff !important;
    border: 1px solid rgba(255,255,255,.82) !important;
    box-shadow: 0 16px 32px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.92) !important;
    padding: 7px !important;
}

html.combeat-page-index.combeat-top-frame .brand-mark img,
html.combeat-page-admin .brand img,
html.combeat-page-account .brand img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    filter: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
}

html.combeat-page-index.combeat-top-frame .nav {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    overflow: visible !important;
    scrollbar-width: none !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 0 !important;
}

html.combeat-page-index.combeat-top-frame .nav::-webkit-scrollbar {
    display: none !important;
}

html.combeat-page-index.combeat-top-frame .nav-item {
    width: 68px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
    border-radius: 15px !important;
    background: transparent !important;
    color: var(--cb-ref-muted) !important;
    border: 0 !important;
    box-shadow: none !important;
    gap: 4px !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
}

html.combeat-page-index.combeat-top-frame .nav-item::after {
    content: "" !important;
    position: absolute !important;
    right: -10px !important;
    top: 12px !important;
    width: 3px !important;
    height: 24px !important;
    border-radius: 999px !important;
    background: transparent !important;
    opacity: 0 !important;
    transform: scaleY(.66) !important;
    transition: opacity .18s ease, transform .18s ease, background .18s ease !important;
}

html.combeat-page-index.combeat-top-frame .nav-item:hover,
html.combeat-page-index.combeat-top-frame .side-btn:hover {
    color: #fff !important;
    transform: translateY(-1px) !important;
}

html.combeat-page-index.combeat-top-frame .nav-item.active {
    color: #fff !important;
    background: transparent !important;
}

html.combeat-page-index.combeat-top-frame .nav-item.active::after {
    opacity: 1 !important;
    transform: scaleY(1) !important;
    background: #fff !important;
    box-shadow: 0 0 16px rgba(255,255,255,.45) !important;
}

html.combeat-page-index.combeat-top-frame .nav-item i,
html.combeat-page-index.combeat-top-frame .nav-item svg {
    width: 21px !important;
    height: 21px !important;
    flex: 0 0 21px !important;
    stroke-width: 2.05 !important;
    fill: none !important;
}

html.combeat-page-index.combeat-top-frame .nav-item.active svg :is(path, rect, circle, polygon) {
    fill: currentColor !important;
    fill-opacity: .88 !important;
    stroke: currentColor !important;
}

html.combeat-page-index.combeat-top-frame .nav-item.active svg :is(line, polyline) {
    fill: none !important;
    stroke: currentColor !important;
}

html.combeat-page-index.combeat-top-frame .side-actions {
    width: 100% !important;
    margin-top: 0 !important;
    padding: 8px 0 0 !important;
    gap: 7px !important;
    flex: 0 0 auto !important;
    align-items: center !important;
}

html.combeat-page-index.combeat-top-frame .side-btn {
    width: 68px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: transparent !important;
    color: var(--cb-ref-muted) !important;
    box-shadow: none !important;
}

html.combeat-page-index.combeat-top-frame .account-btn.is-authenticated {
    height: 52px !important;
    flex-basis: 52px !important;
}

html.combeat-page-index.combeat-top-frame .account-btn .login-icon {
    display: none !important;
}

html.combeat-page-index.combeat-top-frame .account-level-mark {
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    color: #fff !important;
}

html.combeat-page-index.combeat-top-frame .account-name,
html.combeat-page-index.combeat-top-frame .account-balance {
    max-width: 62px !important;
    color: #fff !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
    text-align: center !important;
}

html.combeat-page-index.combeat-top-frame .stage {
    border-left: 0 !important;
    margin-left: 0 !important;
    background: transparent !important;
}

html.combeat-page-index.combeat-top-frame .top-strip,
html.combeat-page-index.combeat-top-frame .topbar,
html.combeat-page-gpt-chat .topbar,
html.combeat-page-admin .topbar,
html.combeat-page-account .topbar {
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,.075) !important;
    box-shadow: none !important;
}

html.combeat-page-index.combeat-top-frame .search,
html.combeat-page-inspiration .search,
html.combeat-page-admin .search,
html.combeat-page-account .search {
    background: rgba(38, 39, 58, .78) !important;
    border: 1px solid rgba(255,255,255,.11) !important;
    border-radius: 22px !important;
    box-shadow: var(--cb-ref-inset), 0 12px 34px rgba(0,0,0,.16) !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-inspiration, .combeat-page-login, .combeat-page-admin, .combeat-page-account, .combeat-page-api-settings) :is(
    .panel,
    .card:not(.masonry .card),
    .table-wrap,
    .tool-panel,
    .control-panel,
    .result-frame,
    .engine-panel,
    .z-param-panel,
    .composer,
    .composer-body,
    .thread-item,
    .record-card,
    .stat-card,
    .notice-card,
    .auth-card,
    .modal-card,
    .lightbox-card,
    #lightboxCard,
    .profile-mini,
    .api-frame,
    .config-card,
    .settings-card,
    .ad-wrap
) {
    background:
        radial-gradient(circle at 88% 82%, rgba(22, 140, 255, .08), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.016)),
        var(--cb-ref-panel) !important;
    border: 1px solid var(--cb-ref-line) !important;
    border-radius: var(--cb-ref-radius) !important;
    box-shadow: var(--cb-ref-shadow-soft), var(--cb-ref-inset) !important;
}

html:is(.combeat-page-admin, .combeat-page-account) .shell {
    background: transparent !important;
}

html:is(.combeat-page-admin, .combeat-page-account) .sidebar {
    background: linear-gradient(180deg, rgba(24, 23, 36, .88), rgba(20, 20, 32, .72)) !important;
    border-right: 1px solid rgba(255,255,255,.055) !important;
    box-shadow: none !important;
}

html:is(.combeat-page-admin, .combeat-page-account) .nav-btn {
    min-height: 44px !important;
    border-radius: 15px !important;
    color: var(--cb-ref-muted) !important;
    background: transparent !important;
    border: 0 !important;
    font-weight: 850 !important;
}

html:is(.combeat-page-admin, .combeat-page-account) .nav-btn:hover {
    color: #fff !important;
    background: rgba(255,255,255,.055) !important;
}

html:is(.combeat-page-admin, .combeat-page-account) .nav-btn.active {
    color: #fff !important;
    background: linear-gradient(180deg, rgba(49, 51, 72, .88), rgba(36, 37, 55, .72)) !important;
    box-shadow: var(--cb-ref-inset), 0 12px 28px rgba(0,0,0,.18) !important;
}

html:is(.combeat-page-admin, .combeat-page-account) .main,
html:is(.combeat-page-admin, .combeat-page-account) .content {
    background: transparent !important;
}

html:is(.combeat-page-admin, .combeat-page-account) .side-pill {
    background: rgba(38, 39, 58, .74) !important;
    border: 1px solid var(--cb-ref-line) !important;
    border-radius: 15px !important;
}

html:is(.combeat-page-admin, .combeat-page-account) .top-title h1,
html:is(.combeat-page-admin, .combeat-page-account) h1,
html:is(.combeat-page-admin, .combeat-page-account) h2,
html:is(.combeat-page-admin, .combeat-page-account) h3 {
    color: var(--cb-ref-text) !important;
}

html:is(.combeat-page-admin, .combeat-page-account) :is(.top-title p, .panel-head p, .section-sub, .empty, .hint, .block-desc, .record-meta, .meta-row) {
    color: var(--cb-ref-muted) !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-admin, .combeat-page-account, .combeat-page-api-settings, .combeat-page-login) :is(
    input,
    textarea,
    select,
    .input,
    .textarea,
    .select,
    .model-select,
    .engine-select
) {
    border-radius: var(--cb-ref-radius-sm) !important;
    border: 1px solid var(--cb-ref-line) !important;
    background-color: rgba(40, 41, 60, .82) !important;
    color: var(--cb-ref-text) !important;
    box-shadow: var(--cb-ref-inset) !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-admin, .combeat-page-account, .combeat-page-api-settings, .combeat-page-login) textarea::placeholder,
html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-admin, .combeat-page-account, .combeat-page-api-settings, .combeat-page-login) input::placeholder {
    color: rgba(181, 188, 209, .62) !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-admin, .combeat-page-account, .combeat-page-api-settings, .combeat-page-login) select {
    appearance: none !important;
    padding-right: 38px !important;
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(255,255,255,.72) 50%),
        linear-gradient(135deg, rgba(255,255,255,.72) 50%, transparent 50%) !important;
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 13px) 50% !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-admin, .combeat-page-account, .combeat-page-api-settings, .combeat-page-login) option {
    background: #24243a !important;
    color: #fff !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat) :is(
    .engine-panel,
    .model-pill,
    .provider-switch,
    .mode-switch,
    .mode-switcher,
    .mini-ratio,
    .resolution-toggle,
    .param-card,
    .upload-card
) {
    background: rgba(34, 35, 52, .72) !important;
    border: 1px solid var(--cb-ref-line) !important;
    border-radius: 19px !important;
    box-shadow: none !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat) :is(
    .model-option.active,
    .provider-switch button.active,
    .mode-switch button.active,
    .mini-ratio button.active,
    .resolution-option.active,
    .mode-btn.active,
    .tab-btn.active
) {
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.16) !important;
}

.btn,
.glass-btn,
.btn-render,
.gen-btn,
.comfy-run,
.send-btn,
.action-btn.primary,
.publish-inspiration-btn,
.load-trigger,
button.primary,
.primary-btn,
.site-info-link,
.save-btn,
.danger-btn:not(.btn) {
    min-height: 40px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, var(--cb-ref-blue-2) 0%, var(--cb-ref-blue) 100%) !important;
    color: #fff !important;
    box-shadow: 0 18px 42px rgba(22, 140, 255, .30), inset 0 1px 0 rgba(255,255,255,.28) !important;
    transition: transform .18s var(--cb-ease), box-shadow .18s ease, filter .18s ease !important;
}

.btn:hover,
.glass-btn:hover,
.btn-render:hover,
.gen-btn:hover,
.comfy-run:hover,
.send-btn:hover,
.action-btn.primary:hover,
.publish-inspiration-btn:hover,
.load-trigger:hover,
button.primary:hover,
.primary-btn:hover,
.site-info-link:hover,
.save-btn:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.04) !important;
    box-shadow: 0 24px 52px rgba(22, 140, 255, .38), inset 0 1px 0 rgba(255,255,255,.32) !important;
}

.btn:not(.primary):not(.danger),
.action-btn:not(.primary),
.copy-btn,
.replicate-btn,
.thread-delete,
.peek-btn,
.theme-float,
.site-info-close,
.site-info-arrow,
button.mini,
.btn.mini,
.ghost-btn,
.icon-btn {
    border-radius: 16px !important;
    border: 1px solid var(--cb-ref-line) !important;
    background: rgba(39, 41, 59, .78) !important;
    color: var(--cb-ref-text) !important;
    box-shadow: var(--cb-ref-inset), 0 12px 26px rgba(0,0,0,.16) !important;
}

.btn.danger,
.danger,
.danger-btn {
    border-color: rgba(248, 113, 113, .26) !important;
    color: #fecaca !important;
    background: linear-gradient(180deg, rgba(105, 39, 60, .84), rgba(66, 32, 48, .78)) !important;
    box-shadow: var(--cb-ref-inset), 0 14px 34px rgba(120, 30, 56, .18) !important;
}

html.combeat-page-inspiration .ad-wrap {
    border-radius: 22px !important;
    overflow: hidden !important;
}

html.combeat-page-inspiration .masonry .card {
    border-radius: 16px !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 72% 18%, rgba(56, 226, 208, .12), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
        rgba(34, 35, 52, .86) !important;
    border: 1px solid var(--cb-ref-line) !important;
    box-shadow: 0 18px 46px rgba(0,0,0,.25), var(--cb-ref-inset) !important;
}

html.combeat-page-inspiration .masonry .media-frame,
html.combeat-page-inspiration .masonry .card img,
html.combeat-page-inspiration .masonry .card video {
    border-radius: 14px !important;
}

html.combeat-page-inspiration .masonry .card:nth-child(4n+1) {
    background:
        radial-gradient(circle at 76% 24%, rgba(22, 140, 255, .18), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.014)),
        rgba(34, 35, 52, .88) !important;
}

html.combeat-page-inspiration .masonry .card:nth-child(4n+2) {
    background:
        radial-gradient(circle at 82% 20%, rgba(236, 61, 154, .17), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.014)),
        rgba(34, 35, 52, .88) !important;
}

html.combeat-page-inspiration .masonry .card:nth-child(4n+3) {
    background:
        radial-gradient(circle at 80% 20%, rgba(56, 226, 208, .15), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.014)),
        rgba(34, 35, 52, .88) !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) :is(.result-frame, .preview-panel, .preview-card, .upload-zone, .drop-zone, .main-preview) {
    background:
        radial-gradient(circle at 78% 24%, rgba(22, 140, 255, .18), transparent 28%),
        radial-gradient(circle at 20% 82%, rgba(236, 61, 154, .12), transparent 34%),
        linear-gradient(145deg, rgba(35, 37, 57, .92), rgba(24, 25, 40, .86)) !important;
    border-color: rgba(255,255,255,.12) !important;
}

#loader:not(.hidden),
#loadingState:not(.hidden),
.loading-box,
.output-spinner,
.cb-spinner {
    position: relative;
}

.loading-box,
.output-spinner {
    background:
        conic-gradient(from 0deg, var(--cb-ref-blue), var(--cb-ref-pink), var(--cb-ref-cyan), var(--cb-ref-blue)) !important;
    border: 0 !important;
    box-shadow: 0 0 34px rgba(22,140,255,.28), 0 0 58px rgba(236,61,154,.12) !important;
    animation: cbRefSpin 1.05s linear infinite, cbRefPulse 1.8s ease-in-out infinite !important;
}

.loading-box::after,
.output-spinner::after {
    content: "" !important;
    position: absolute !important;
    inset: 4px !important;
    border-radius: inherit !important;
    background: var(--cb-ref-bg-2) !important;
}

#loader:not(.hidden)::before,
#loadingState:not(.hidden)::before {
    content: "" !important;
    position: absolute !important;
    inset: -16px !important;
    border-radius: 28px !important;
    background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.08) 42%, transparent 78%) !important;
    background-size: 220% 100% !important;
    animation: cbRefShimmer 1.6s ease-in-out infinite !important;
    pointer-events: none !important;
}

html.combeat-page-login .auth-card {
    border-radius: 24px !important;
    background:
        radial-gradient(circle at 82% 10%, rgba(22, 140, 255, .12), transparent 34%),
        linear-gradient(180deg, rgba(35,35,53,.96), rgba(22,22,36,.92)) !important;
}

html.combeat-page-login .brand-mark {
    width: 58px !important;
    height: 58px !important;
    border-radius: 19px !important;
    background: #f7fbff !important;
    padding: 8px !important;
}

html.combeat-page-login .brand-mark img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

html.combeat-page-login .title,
html.combeat-page-login .subtitle,
html.combeat-page-login .label {
    color: var(--cb-ref-text) !important;
}

html.combeat-page-login .subtitle {
    color: var(--cb-ref-muted) !important;
}

html:not(.studio-theme-dark) :is(.btn:not(.primary):not(.danger), .action-btn:not(.primary), .copy-btn, .replicate-btn, .ghost-btn, .icon-btn, .site-info-close, .site-info-arrow) {
    background: rgba(255,255,255,.72) !important;
    color: var(--cb-ref-text) !important;
}

html:not(.studio-theme-dark) :is(input, textarea, select, .input, .textarea, .select) {
    background-color: rgba(255,255,255,.74) !important;
    color: var(--cb-ref-text) !important;
}

@keyframes cbRefSpin {
    to { transform: rotate(360deg); }
}

@keyframes cbRefPulse {
    0%, 100% { filter: saturate(1); opacity: .86; }
    50% { filter: saturate(1.28); opacity: 1; }
}

@keyframes cbRefShimmer {
    0% { background-position: 120% 0; opacity: .25; }
    50% { opacity: .7; }
    100% { background-position: -120% 0; opacity: .25; }
}

@media (max-height: 760px) {
    html.combeat-page-index.combeat-top-frame .sidebar {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        gap: 6px !important;
    }
    html.combeat-page-index.combeat-top-frame .brand {
        height: 50px !important;
        margin-bottom: 4px !important;
    }
    html.combeat-page-index.combeat-top-frame .brand-mark {
        width: 42px !important;
        height: 42px !important;
        border-radius: 15px !important;
    }
    html.combeat-page-index.combeat-top-frame .nav {
        gap: 2px !important;
    }
    html.combeat-page-index.combeat-top-frame .nav-item {
        height: 42px !important;
        flex-basis: 42px !important;
        font-size: 9px !important;
    }
    html.combeat-page-index.combeat-top-frame .nav-item i,
    html.combeat-page-index.combeat-top-frame .nav-item svg {
        width: 19px !important;
        height: 19px !important;
        flex-basis: 19px !important;
    }
    html.combeat-page-index.combeat-top-frame .side-actions {
        gap: 3px !important;
        padding-top: 4px !important;
    }
    html.combeat-page-index.combeat-top-frame .side-btn {
        height: 34px !important;
        flex-basis: 34px !important;
    }
}

/* Final local polish: no top divider lines, filled inspiration canvas, and stable model selectors. */
html.combeat-page-index.combeat-top-frame .stage::before,
html.combeat-page-index.combeat-top-frame .stage::after,
html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-inspiration, .combeat-page-canvas) .topbar::before,
html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-inspiration, .combeat-page-canvas) .topbar::after {
    content: none !important;
    display: none !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-inspiration, .combeat-page-canvas) .topbar,
html.combeat-page-index.combeat-top-frame .topbar {
    border-bottom: 0 !important;
    box-shadow: none !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) :is(.h-px, .border-b-2),
html.combeat-page-gpt-chat .topbar {
    border-color: transparent !important;
    border-bottom-color: transparent !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) section > .flex.items-center.gap-6 :is(.h-px, [class~="h-px"]) {
    display: none !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) nav .border-b-2 {
    border-bottom-color: transparent !important;
}

html.combeat-page-inspiration .shell {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 24px clamp(18px, 2.4vw, 36px) 64px !important;
}

html.combeat-page-inspiration .topbar {
    width: 100% !important;
    height: auto !important;
    min-height: 58px !important;
    padding: 8px 0 14px !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    backdrop-filter: none !important;
    border-bottom: 0 !important;
}

html.combeat-page-inspiration .search {
    width: min(560px, calc(100% - 20px)) !important;
    max-width: 560px !important;
    margin: 0 auto !important;
}

html.combeat-page-inspiration .search input {
    border-radius: 18px !important;
}

html.combeat-page-inspiration .ad-wrap,
html.combeat-page-inspiration .masonry {
    width: 100% !important;
    max-width: none !important;
}

html.combeat-page-inspiration .ad-wrap {
    margin: 24px 0 22px !important;
    border-radius: 12px !important;
}

html.combeat-page-inspiration .masonry {
    column-width: clamp(212px, 16vw, 292px) !important;
    column-gap: 16px !important;
}

html.combeat-page-inspiration .masonry .card,
html.combeat-page-inspiration .masonry .media-frame,
html.combeat-page-inspiration .masonry .card img,
html.combeat-page-inspiration .masonry .card video {
    border-radius: 12px !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-canvas, .combeat-page-admin, .combeat-page-account, .combeat-page-api-settings) select {
    appearance: none !important;
    -webkit-appearance: none !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    padding-right: 42px !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='18'%20height='18'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23d7dded'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 16px 16px !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-canvas, .combeat-page-admin, .combeat-page-account, .combeat-page-api-settings) body :is(select.nano-input, select.size-select, select.provider-select, select.select-lite, select.input, select.model-select, select.engine-select) {
    background-color: rgba(38, 39, 58, .84) !important;
    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='18'%20height='18'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23d7dded'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E"),
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.024)) !important;
    background-repeat: no-repeat, repeat !important;
    background-position: right 14px center, 0 0 !important;
    background-size: 16px 16px, auto !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-canvas, .combeat-page-admin, .combeat-page-account, .combeat-page-api-settings) body select:not(#cb-select-arrow-boost) {
    background-color: rgba(38, 39, 58, .84) !important;
    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='18'%20height='18'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23d7dded'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E"),
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.024)) !important;
    background-repeat: no-repeat, repeat !important;
    background-position: right 14px center, 0 0 !important;
    background-size: 16px 16px, auto !important;
    padding-right: 42px !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) :is(.engine-panel, .z-param-panel) {
    min-width: 0 !important;
    overflow: visible !important;
}

html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) .engine-select-grid {
    display: grid !important;
    grid-template-columns: minmax(132px, .82fr) minmax(210px, 1.18fr) !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
}

html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) .engine-select-grid > *,
html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) .select-shell,
html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) .model-select-shell {
    min-width: 0 !important;
    max-width: 100% !important;
}

html.combeat-page-zimage .z-param-panel {
    display: grid !important;
    grid-template-columns: minmax(360px, 1fr) minmax(254px, .58fr) minmax(158px, 188px) !important;
    align-items: end !important;
    gap: 12px !important;
}

html.combeat-page-zimage .z-param-section {
    min-width: 0 !important;
    width: 100% !important;
}

html.combeat-page-zimage .z-model-section,
html.combeat-page-zimage .z-size-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
}

html.combeat-page-zimage .z-model-section .engine-select-grid,
html.combeat-page-zimage .z-size-grid {
    display: grid !important;
    grid-template-columns: minmax(132px, .82fr) minmax(210px, 1.18fr) !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
}

html.combeat-page-zimage .z-size-grid {
    grid-template-columns: minmax(86px, .7fr) minmax(132px, 1fr) !important;
}

html.combeat-page-zimage .z-param-label,
html.combeat-page-zimage .z-param-panel .engine-hint {
    grid-column: auto !important;
    order: initial !important;
}

html.combeat-page-zimage .z-param-panel .btn-render {
    width: 100% !important;
    align-self: end !important;
}

@media (max-width: 1120px) {
    html.combeat-page-zimage .z-param-panel,
    html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) .engine-select-grid,
    html.combeat-page-zimage .z-model-section .engine-select-grid,
    html.combeat-page-zimage .z-size-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Remove all top divider lines across functional pages. */
html:is(
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-inspiration,
    .combeat-page-canvas,
    .combeat-page-admin,
    .combeat-page-account,
    .combeat-page-api-settings
) :is(.topbar, .topbar-inner, header.topbar) {
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

html:is(
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-inspiration,
    .combeat-page-canvas,
    .combeat-page-admin,
    .combeat-page-account,
    .combeat-page-api-settings
) :is(.topbar, .topbar-inner, header.topbar)::before,
html:is(
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-inspiration,
    .combeat-page-canvas,
    .combeat-page-admin,
    .combeat-page-account,
    .combeat-page-api-settings
) :is(.topbar, .topbar-inner, header.topbar)::after,
html.combeat-page-index.combeat-top-frame :is(.stage, .app-shell)::before,
html.combeat-page-index.combeat-top-frame :is(.stage, .app-shell)::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html:is(
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-inspiration,
    .combeat-page-canvas
) :is(.h-px, [class~="h-px"], .border-b-2, [class~="border-b-2"]) {
    display: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Final reference pass: aligned controls, visible select arrows, softer buttons, and gradient cards. */
html:is(.combeat-page-admin, .combeat-page-account) .brand {
    display: none !important;
}

html:is(.combeat-page-admin, .combeat-page-account) .sidebar {
    padding-top: 22px !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-canvas, .combeat-page-admin, .combeat-page-account, .combeat-page-api-settings) :is(.select-shell, .model-select-shell, .select-wrap) {
    position: relative !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-canvas, .combeat-page-admin, .combeat-page-account, .combeat-page-api-settings) :is(.select-shell, .model-select-shell, .select-wrap)::after {
    content: "" !important;
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    width: 8px !important;
    height: 8px !important;
    border-right: 2px solid rgba(231, 238, 255, .92) !important;
    border-bottom: 2px solid rgba(231, 238, 255, .92) !important;
    transform: translateY(-62%) rotate(45deg) !important;
    pointer-events: none !important;
    z-index: 3 !important;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.28)) !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-canvas, .combeat-page-admin, .combeat-page-account, .combeat-page-api-settings) body select:not(#cb-select-arrow-boost),
html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-canvas, .combeat-page-admin, .combeat-page-account, .combeat-page-api-settings) body :is(select.nano-input, select.size-select, select.provider-select, select.select-lite, select.input, select.model-select, select.engine-select) {
    height: 46px !important;
    border-radius: 16px !important;
    padding-left: 16px !important;
    padding-right: 46px !important;
    color: #f2f6ff !important;
    border: 1px solid rgba(185, 198, 235, .16) !important;
    background-color: rgba(45, 49, 73, .70) !important;
    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='18'%20height='18'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23eef5ff'%20stroke-width='2.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E"),
        radial-gradient(circle at 18% 12%, rgba(56, 226, 208, .10), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.026)) !important;
    background-repeat: no-repeat, no-repeat, repeat !important;
    background-position: right 15px center, 0 0, 0 0 !important;
    background-size: 18px 18px, auto, auto !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
}

html.combeat-page-zimage .z-param-panel {
    grid-template-columns: minmax(180px, .78fr) minmax(250px, 1.06fr) minmax(118px, .45fr) minmax(174px, .62fr) minmax(170px, .56fr) !important;
    align-items: end !important;
    gap: 12px !important;
}

html.combeat-page-zimage .z-param-panel :is(.select-shell, .size-select, .btn-render) {
    height: 46px !important;
    align-self: end !important;
}

html.combeat-page-zimage .z-param-panel .btn-render {
    min-width: 0 !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #f7fbff 0%, #dbe9ff 100%) !important;
    color: #11182a !important;
    border: 1px solid rgba(255,255,255,.70) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 14px 30px rgba(25, 60, 125, .18) !important;
}

html.combeat-page-zimage .z-param-panel .btn-render:hover {
    background: linear-gradient(135deg, #ffffff 0%, #e8f2ff 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 18px 36px rgba(25, 60, 125, .22) !important;
}

html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) .engine-select-grid {
    align-items: end !important;
}

html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) .engine-select-grid select {
    height: 46px !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-canvas) :is(.btn, .glass-btn, .btn-render, .gen-btn, .comfy-run, .send-btn, .primary-btn, button.primary, .btn.primary, .publish-inspiration-btn) {
    border-radius: 18px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 14px 30px rgba(22, 140, 255, .16) !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-canvas, .combeat-page-admin, .combeat-page-account) :is(.btn:not(.primary):not(.danger), .action-btn:not(.primary), .copy-btn, .replicate-btn, .thread-delete, .peek-btn, .ghost-btn, .icon-btn, .tool-btn, button.mini, .btn.mini) {
    background: linear-gradient(180deg, rgba(57, 62, 89, .62), rgba(38, 42, 65, .46)) !important;
    border: 1px solid rgba(185, 198, 235, .13) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-admin, .combeat-page-account) :is(.top-actions, .section-actions, .btn-row, .side-actions, .toolbar, .gate-head-actions) {
    align-items: center !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-inspiration, .combeat-page-admin, .combeat-page-account) :is(.card:not(.masonry .card), .panel, .tool-panel, .control-panel, .result-frame, .engine-panel, .z-param-panel, .composer, .profile-mini, .stat-card, .notice-card) {
    background:
        radial-gradient(circle at 92% 18%, rgba(73, 153, 255, .22), transparent 24%),
        radial-gradient(circle at 12% 88%, rgba(56, 226, 208, .10), transparent 30%),
        linear-gradient(145deg, rgba(58, 62, 90, .78), rgba(31, 34, 54, .84)) !important;
    border-color: rgba(187, 200, 236, .14) !important;
}

html:is(.combeat-page-admin, .combeat-page-account) .cards > :nth-child(4n + 1),
html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) .masonry-item:nth-child(4n + 1) {
    background:
        radial-gradient(circle at 86% 16%, rgba(56, 226, 208, .24), transparent 28%),
        linear-gradient(145deg, rgba(39, 54, 86, .82), rgba(25, 30, 52, .88)) !important;
}

html:is(.combeat-page-admin, .combeat-page-account) .cards > :nth-child(4n + 2),
html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) .masonry-item:nth-child(4n + 2) {
    background:
        radial-gradient(circle at 84% 18%, rgba(140, 98, 255, .24), transparent 28%),
        linear-gradient(145deg, rgba(52, 42, 82, .82), rgba(29, 28, 50, .88)) !important;
}

html:is(.combeat-page-admin, .combeat-page-account) .cards > :nth-child(4n + 3),
html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) .masonry-item:nth-child(4n + 3) {
    background:
        radial-gradient(circle at 84% 18%, rgba(255, 176, 88, .20), transparent 28%),
        linear-gradient(145deg, rgba(71, 48, 55, .82), rgba(35, 30, 45, .88)) !important;
}

html:is(.combeat-page-admin, .combeat-page-account) :is(.section-head h2, .card-title, .top-title h1),
html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat) :is(.z-param-label, .control-label, .title-block h1) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
}

html:is(.combeat-page-admin, .combeat-page-account) :is(.section-head h2, .card-title)::before,
html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat) :is(.z-param-label, .control-label)::before {
    content: "" !important;
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    border-radius: 6px !important;
    background:
        radial-gradient(circle at 34% 30%, #65f3ff 0 18%, transparent 20%),
        linear-gradient(135deg, #44d7f2 0%, #168cff 62%, #6c5cff 100%) !important;
    box-shadow: 0 8px 18px rgba(22, 140, 255, .24), inset 0 1px 0 rgba(255,255,255,.38) !important;
}

@media (max-width: 1120px) {
    html.combeat-page-zimage .z-param-panel {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

html.combeat-page-zimage.studio-theme-dark body .z-param-panel,
html.combeat-page-online.studio-theme-dark body .tool-panel,
html.combeat-page-online.studio-theme-dark body .control-panel,
html.combeat-page-enhance.studio-theme-dark body .engine-panel,
html.combeat-page-klein.studio-theme-dark body .engine-panel,
html.combeat-page-angle.studio-theme-dark body .engine-panel,
html.combeat-page-gpt-chat.studio-theme-dark body .composer,
html.combeat-page-gpt-chat.studio-theme-dark body .composer-body {
    background:
        radial-gradient(circle at 92% 18%, rgba(73, 153, 255, .24), transparent 24%),
        radial-gradient(circle at 12% 88%, rgba(56, 226, 208, .12), transparent 30%),
        linear-gradient(145deg, rgba(58, 62, 90, .76), rgba(31, 34, 54, .86)) !important;
    border-color: rgba(187, 200, 236, .14) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 22px 60px rgba(0,0,0,.20) !important;
}

html.combeat-page-zimage.studio-theme-dark body .z-param-panel .btn-render,
html.combeat-page-online.studio-theme-dark body .glass-btn,
html.combeat-page-enhance.studio-theme-dark body .glass-btn,
html.combeat-page-klein.studio-theme-dark body .glass-btn,
html.combeat-page-angle.studio-theme-dark body #generateBtn,
html.combeat-page-gpt-chat.studio-theme-dark body .send-btn,
html.combeat-page-canvas.studio-theme-dark body .gen-btn,
html.combeat-page-canvas.studio-theme-dark body .comfy-run {
    background: linear-gradient(135deg, #f7fbff 0%, #dceaff 100%) !important;
    color: #11182a !important;
    border: 1px solid rgba(255,255,255,.70) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 14px 30px rgba(25, 60, 125, .16) !important;
}

html.combeat-page-zimage.studio-theme-dark body .z-param-panel .btn-render:hover,
html.combeat-page-online.studio-theme-dark body .glass-btn:hover,
html.combeat-page-enhance.studio-theme-dark body .glass-btn:hover,
html.combeat-page-klein.studio-theme-dark body .glass-btn:hover,
html.combeat-page-angle.studio-theme-dark body #generateBtn:hover,
html.combeat-page-gpt-chat.studio-theme-dark body .send-btn:hover,
html.combeat-page-canvas.studio-theme-dark body .gen-btn:hover,
html.combeat-page-canvas.studio-theme-dark body .comfy-run:hover {
    background: linear-gradient(135deg, #ffffff 0%, #e9f3ff 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 18px 36px rgba(25, 60, 125, .20) !important;
}

html.combeat-page-zimage.studio-theme-dark body :is(#cb-force, .z-param-panel),
html.combeat-page-online.studio-theme-dark body :is(#cb-force, .tool-panel, .control-panel),
html.combeat-page-enhance.studio-theme-dark body :is(#cb-force, .engine-panel),
html.combeat-page-klein.studio-theme-dark body :is(#cb-force, .engine-panel),
html.combeat-page-angle.studio-theme-dark body :is(#cb-force, .engine-panel),
html.combeat-page-gpt-chat.studio-theme-dark body :is(#cb-force, .composer, .composer-body),
html:is(.combeat-page-admin, .combeat-page-account).studio-theme-dark body :is(#cb-force, .card, .panel, .stat-card, .notice-card, .profile-mini) {
    background:
        radial-gradient(circle at 92% 18%, rgba(73, 153, 255, .24), transparent 24%),
        radial-gradient(circle at 12% 88%, rgba(56, 226, 208, .12), transparent 30%),
        linear-gradient(145deg, rgba(58, 62, 90, .76), rgba(31, 34, 54, .86)) !important;
    border-color: rgba(187, 200, 236, .14) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 22px 60px rgba(0,0,0,.20) !important;
}

html.combeat-page-zimage.studio-theme-dark body :is(#cb-force, .z-param-panel) .btn-render,
html.combeat-page-online.studio-theme-dark body :is(#cb-force, .glass-btn),
html.combeat-page-enhance.studio-theme-dark body :is(#cb-force, .glass-btn),
html.combeat-page-klein.studio-theme-dark body :is(#cb-force, .glass-btn),
html.combeat-page-angle.studio-theme-dark body :is(#cb-force, #generateBtn),
html.combeat-page-gpt-chat.studio-theme-dark body :is(#cb-force, .send-btn),
html.combeat-page-canvas.studio-theme-dark body :is(#cb-force, .gen-btn, .comfy-run) {
    background: linear-gradient(135deg, #f7fbff 0%, #dceaff 100%) !important;
    color: #11182a !important;
    border: 1px solid rgba(255,255,255,.70) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 14px 30px rgba(25, 60, 125, .16) !important;
}

/* Text-to-image parameter row: keep every control aligned and readable. */
html.combeat-page-zimage body .z-param-panel {
    display: grid !important;
    grid-template-columns: minmax(180px, 210px) minmax(260px, 1fr) minmax(132px, 150px) minmax(210px, 260px) minmax(174px, 200px) !important;
    grid-template-areas:
        "label label label label label"
        "provider model resolution ratio action"
        "hint hint hint hint hint" !important;
    align-items: center !important;
    gap: 10px 12px !important;
    padding: 34px 28px 24px !important;
    min-height: 188px !important;
}

html.combeat-page-zimage body .z-param-panel .z-model-section,
html.combeat-page-zimage body .z-param-panel .z-size-section,
html.combeat-page-zimage body .z-param-panel .engine-select-grid,
html.combeat-page-zimage body .z-param-panel .z-size-grid {
    display: contents !important;
}

html.combeat-page-zimage body .z-param-panel .z-param-label {
    grid-area: label !important;
    margin: 0 0 4px !important;
    align-self: start !important;
}

html.combeat-page-zimage body .z-param-panel .engine-select-grid > .select-shell:first-child {
    grid-area: provider !important;
}

html.combeat-page-zimage body .z-param-panel .engine-select-grid > .select-shell:nth-child(2) {
    grid-area: model !important;
}

html.combeat-page-zimage body .z-param-panel #resolutionSelect {
    grid-area: resolution !important;
}

html.combeat-page-zimage body .z-param-panel #ratioSelect {
    grid-area: ratio !important;
}

html.combeat-page-zimage body .z-param-panel #mainGenBtn {
    grid-area: action !important;
}

html.combeat-page-zimage body .z-param-panel .engine-hint {
    grid-area: hint !important;
    margin: 0 !important;
    align-self: start !important;
}

html.combeat-page-zimage body .z-param-panel :is(.select-shell, select, #mainGenBtn) {
    width: 100% !important;
    min-width: 0 !important;
}

html.combeat-page-zimage body .z-param-panel :is(select, #mainGenBtn) {
    height: 48px !important;
}

html.combeat-page-zimage body .z-param-panel :is(.select-shell, #resolutionSelect, #ratioSelect, #mainGenBtn) {
    align-self: stretch !important;
    justify-self: stretch !important;
    height: 48px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

html.combeat-page-zimage body .z-param-panel .select-shell {
    display: block !important;
    line-height: 0 !important;
}

html.combeat-page-zimage body .z-param-panel .select-shell > select {
    display: block !important;
    height: 100% !important;
}

html.combeat-page-zimage body .z-param-panel select {
    background-color: rgba(56, 60, 86, .66) !important;
}

html.combeat-page-zimage body .z-param-panel #mainGenBtn {
    margin: 0 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    white-space: nowrap !important;
    transform: none !important;
}

@media (max-width: 1180px) {
    html.combeat-page-zimage body .z-param-panel {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        grid-template-areas:
            "label label"
            "provider model"
            "resolution ratio"
            "action action"
            "hint hint" !important;
    }
}

@media (max-width: 700px) {
    html.combeat-page-zimage body .z-param-panel {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "label"
            "provider"
            "model"
            "resolution"
            "ratio"
            "action"
            "hint" !important;
    }
}

/* Final interaction polish: no dark blocks behind buttons, aligned sidebar marker, compact chat send button. */
html.combeat-page-index.combeat-top-frame .nav-item::after {
    right: -8px !important;
    top: 50% !important;
    height: 24px !important;
    transform: translateY(-50%) scaleY(.66) !important;
    transform-origin: center !important;
}

html.combeat-page-index.combeat-top-frame .nav-item.active::after {
    transform: translateY(-50%) scaleY(1) !important;
}

html.combeat-page-index.combeat-top-frame :is(.nav-item, .side-btn, .theme-dock-btn, .account-btn) {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html.combeat-page-index.combeat-top-frame .side-btn::before,
html.combeat-page-index.combeat-top-frame .side-btn::after {
    display: none !important;
}

html:is(
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-canvas,
    .combeat-page-inspiration,
    .combeat-page-admin,
    .combeat-page-account,
    .combeat-page-api-settings
) :is(.mode-switch, .provider-switch, .mini-ratio, .resolution-toggle, .tab-switch, .switch-row, .btn-row, .toolbar, .top-actions, .section-actions, .side-actions, .gate-head-actions) {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html:is(
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-canvas,
    .combeat-page-inspiration,
    .combeat-page-admin,
    .combeat-page-account,
    .combeat-page-api-settings
) :is(.btn:not(.primary):not(.danger), .glass-btn:not(.primary), .action-btn:not(.primary), .copy-btn, .replicate-btn, .thread-delete, .peek-btn, .ghost-btn, .icon-btn, .tool-btn, button.mini, .btn.mini, .mode-switch button, .provider-switch button, .mini-ratio button, .resolution-option, .tab-btn, .key-btn) {
    background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.035)) !important;
    border: 1px solid rgba(210, 222, 255, .14) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09) !important;
    color: #edf4ff !important;
}

html:is(
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-canvas,
    .combeat-page-inspiration,
    .combeat-page-admin,
    .combeat-page-account,
    .combeat-page-api-settings
) :is(.btn:not(.primary):not(.danger), .glass-btn:not(.primary), .action-btn:not(.primary), .copy-btn, .replicate-btn, .thread-delete, .peek-btn, .ghost-btn, .icon-btn, .tool-btn, button.mini, .btn.mini, .mode-switch button, .provider-switch button, .mini-ratio button, .resolution-option, .tab-btn, .key-btn):hover {
    background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.055)) !important;
    border-color: rgba(220, 232, 255, .24) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 24px rgba(10, 18, 38, .14) !important;
}

html:is(
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-canvas,
    .combeat-page-inspiration,
    .combeat-page-admin,
    .combeat-page-account,
    .combeat-page-api-settings
) :is(.mode-switch button.active, .provider-switch button.active, .mini-ratio button.active, .resolution-option.active, .tab-btn.active) {
    background: linear-gradient(135deg, #f8fbff 0%, #dfeaff 100%) !important;
    color: #11182a !important;
    border-color: rgba(255,255,255,.72) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 10px 24px rgba(28, 92, 190, .16) !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,
    .combeat-page-canvas,
    .combeat-page-inspiration,
    .combeat-page-admin,
    .combeat-page-account,
    .combeat-page-api-settings
) :is(.btn:not(.primary):not(.danger), .glass-btn:not(.primary), .action-btn:not(.primary), .copy-btn, .replicate-btn, .thread-delete, .peek-btn, .ghost-btn, .icon-btn, .tool-btn, button.mini, .btn.mini, .mode-switch button, .provider-switch button, .mini-ratio button, .resolution-option, .tab-btn, .key-btn) {
    background: rgba(255,255,255,.62) !important;
    color: #253145 !important;
    border-color: rgba(93, 120, 168, .18) !important;
}

html.combeat-page-gpt-chat .send-cost-label {
    display: none !important;
}

html.combeat-page-gpt-chat .send-btn {
    width: auto !important;
    min-width: 128px !important;
    height: 48px !important;
    padding: 0 18px !important;
    border-radius: 18px !important;
    gap: 8px !important;
    white-space: nowrap !important;
}

html.combeat-page-gpt-chat .send-btn .send-btn-text {
    display: inline-flex !important;
    align-items: center !important;
    max-width: 132px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

html.combeat-page-gpt-chat .composer-inside-foot {
    align-items: flex-end !important;
}

html.combeat-page-canvas :is(select, .select-lite, .gen-model-select, .ms-custom-model-select),
html.combeat-page-gpt-chat :is(select, .provider-select, .model-select) {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Unified control pass: remove dark blocks and keep all feature controls aligned. */
html:is(
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-canvas
) :is(
    .mode-switch,
    .provider-switch,
    .mini-ratio,
    .resolution-toggle,
    .mode-switcher,
    .engine-select-grid,
    .z-size-grid,
    .llm-mode,
    .gen-run-row
) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html:is(
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-canvas
) :is(.select-shell, .model-select-shell, .select-wrap) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 16px !important;
}

html:is(
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-canvas
) body :is(
    select,
    .provider-select,
    .engine-select,
    .model-select,
    .select-lite,
    .size-select,
    .nano-input
) {
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(232, 240, 255, .22) !important;
    background-color: rgba(226, 239, 255, .10) !important;
    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='18'%20height='18'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23f4f8ff'%20stroke-width='2.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E"),
        linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.055)) !important;
    background-repeat: no-repeat, repeat !important;
    background-position: right 15px center, 0 0 !important;
    background-size: 18px 18px, auto !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important;
    color: #f3f7ff !important;
    outline: none !important;
}

html:is(
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-canvas
) body :is(
    select,
    .provider-select,
    .engine-select,
    .model-select,
    .select-lite,
    .size-select,
    .nano-input
):focus {
    border-color: rgba(242, 248, 255, .42) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 3px rgba(84, 151, 255, .14) !important;
}

html:is(
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-canvas
) :is(
    .mode-switch button,
    .mode-switcher button,
    .provider-switch button,
    .mini-ratio button,
    .resolution-option,
    .btn,
    .glass-btn,
    .btn-render,
    .gen-btn,
    .comfy-run,
    .send-btn,
    .primary-btn,
    button.primary,
    .btn.primary,
    .action-btn,
    .tool-btn,
    .icon-btn,
    .ghost-btn,
    .publish-inspiration-btn,
    .gen-cascade-btn
) {
    min-height: 48px !important;
    height: 48px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(232, 240, 255, .20) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important;
    outline: none !important;
}

html:is(
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-canvas
) :is(
    .mode-switch button,
    .mode-switcher button,
    .provider-switch button,
    .mini-ratio button,
    .resolution-option,
    .btn:not(.primary):not(.danger),
    .action-btn:not(.primary):not(.danger),
    .tool-btn,
    .icon-btn,
    .ghost-btn
) {
    background: rgba(230, 241, 255, .08) !important;
    color: #edf4ff !important;
}

html:is(
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-canvas
) :is(.mode-switch button.active, .mode-switcher button.active, .provider-switch button.active, .mini-ratio button.active, .resolution-option.active) {
    background: linear-gradient(135deg, #f7fbff 0%, #dceaff 100%) !important;
    color: #11182a !important;
    border-color: rgba(255,255,255,.72) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
}

html:is(
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-canvas
) :is(.glass-btn, .btn-render, .gen-btn, .comfy-run, .send-btn, .primary-btn, button.primary, .btn.primary, .publish-inspiration-btn, .gen-cascade-btn) {
    background: linear-gradient(135deg, #f7fbff 0%, #dceaff 100%) !important;
    color: #11182a !important;
    border-color: rgba(255,255,255,.72) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
}

html:is(
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-canvas
) :is(button, .btn, .glass-btn, .btn-render, .gen-btn, .send-btn, .provider-select, select) :is(svg, i) {
    flex: 0 0 auto !important;
}

html.combeat-page-gpt-chat .messages.is-empty {
    justify-content: center !important;
    align-items: center !important;
    padding: 82px 42px 258px !important;
}

html.combeat-page-gpt-chat .chat-empty-state {
    width: 100% !important;
    min-height: 180px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    color: rgba(232, 239, 255, .30) !important;
    text-align: center !important;
    transform: translateY(8px) !important;
}

html.combeat-page-gpt-chat .chat-empty-state div {
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .36em !important;
    text-transform: uppercase !important;
}

html.combeat-page-gpt-chat .composer {
    width: min(1220px, calc(100% - 64px)) !important;
    min-height: 192px !important;
    padding: 14px !important;
    border-radius: 30px !important;
}

html.combeat-page-gpt-chat .composer-body {
    min-height: 164px !important;
    padding: 18px !important;
    border-radius: 24px !important;
}

html.combeat-page-gpt-chat textarea#messageInput {
    min-height: 86px !important;
    padding: 4px 2px !important;
    line-height: 1.6 !important;
}

html.combeat-page-gpt-chat .composer-inside-foot {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
}

html.combeat-page-gpt-chat .left-tools {
    width: 100% !important;
    align-items: center !important;
}

html.combeat-page-gpt-chat .inline-controls {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(150px, 156px) minmax(360px, 1fr) !important;
    grid-template-areas:
        "mode providers"
        "badges badges"
        "images images" !important;
    align-items: center !important;
    gap: 10px 12px !important;
}

html.combeat-page-gpt-chat .mode-switch {
    grid-area: mode !important;
    height: 48px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    align-items: center !important;
    padding: 0 !important;
}

html.combeat-page-gpt-chat .provider-switch {
    grid-area: providers !important;
    height: 48px !important;
    display: grid !important;
    grid-template-columns: minmax(190px, 260px) minmax(230px, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
}

html.combeat-page-gpt-chat .provider-select,
html.combeat-page-gpt-chat .mode-switch button,
html.combeat-page-gpt-chat .send-btn {
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    align-self: center !important;
}

html.combeat-page-gpt-chat .send-btn {
    min-width: 142px !important;
    justify-self: end !important;
}

html.combeat-page-gpt-chat .image-controls {
    grid-area: images !important;
    align-items: center !important;
    gap: 10px !important;
}

html.combeat-page-gpt-chat .mini-ratio,
html.combeat-page-gpt-chat .resolution-toggle {
    min-height: 48px !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
}

html.combeat-page-gpt-chat .mini-ratio button,
html.combeat-page-gpt-chat .resolution-option {
    min-width: 52px !important;
}

@media (max-width: 900px) {
    html.combeat-page-gpt-chat .composer {
        width: calc(100% - 28px) !important;
    }

    html.combeat-page-gpt-chat .composer-inside-foot,
    html.combeat-page-gpt-chat .inline-controls,
    html.combeat-page-gpt-chat .provider-switch {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html.combeat-page-gpt-chat .composer-inside-foot {
        gap: 10px !important;
    }

    html.combeat-page-gpt-chat .send-btn {
        width: 100% !important;
        justify-self: stretch !important;
    }
}

/* Absolute final pass: beat older high-specificity select rules and remove empty grid offsets. */
html:is(
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-canvas
) body :is(
    select:not(#cb-select-arrow-boost),
    select.provider-select:not(#cb-select-arrow-boost),
    select.engine-select:not(#cb-select-arrow-boost),
    select.model-select:not(#cb-select-arrow-boost),
    select.select-lite:not(#cb-select-arrow-boost),
    select.size-select:not(#cb-select-arrow-boost),
    select.nano-input:not(#cb-select-arrow-boost)
) {
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(232, 240, 255, .22) !important;
    background-color: rgba(226, 239, 255, .10) !important;
    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='18'%20height='18'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23f4f8ff'%20stroke-width='2.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E"),
        linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.055)) !important;
    background-repeat: no-repeat, repeat !important;
    background-position: right 15px center, 0 0 !important;
    background-size: 18px 18px, auto !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important;
    color: #f3f7ff !important;
}

html.combeat-page-gpt-chat .inline-controls {
    row-gap: 0 !important;
}

html.combeat-page-gpt-chat .model-badge-slot:empty,
html.combeat-page-gpt-chat .image-controls.hidden {
    display: none !important;
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

html.combeat-page-gpt-chat .model-badge-slot:not(:empty),
html.combeat-page-gpt-chat .image-controls:not(.hidden) {
    margin-top: 10px !important;
}

html.combeat-page-gpt-chat .composer-inside-foot {
    align-items: start !important;
}

html.combeat-page-gpt-chat .send-btn {
    align-self: start !important;
}

html.combeat-page-gpt-chat :is(.mode-switch button.active, .mode-switcher button.active, .mini-ratio button.active, .resolution-option.active) {
    background: linear-gradient(135deg, #f7fbff 0%, #dceaff 100%) !important;
    color: #11182a !important;
    border-color: rgba(255,255,255,.72) !important;
}

html.combeat-page-gpt-chat body :is(
    .mode-switch button.active:not(#cb-active-boost),
    .mode-switcher button.active:not(#cb-active-boost),
    .mini-ratio button.active:not(#cb-active-boost),
    .resolution-option.active:not(#cb-active-boost)
) {
    background: linear-gradient(135deg, #f7fbff 0%, #dceaff 100%) !important;
    color: #11182a !important;
    border-color: rgba(255,255,255,.72) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
}

html.combeat-page-gpt-chat body :is(
    .mode-switch:not(#cb-active-boost),
    .provider-switch:not(#cb-active-boost),
    .mini-ratio:not(#cb-active-boost),
    .resolution-toggle:not(#cb-active-boost)
) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Combeat finance-dashboard reference pass: one canvas, visible function grid, softer controls. */
:root {
    --cb-dash-bg: #181825;
    --cb-dash-bg-2: #12131e;
    --cb-dash-rail: transparent;
    --cb-dash-panel: rgba(35, 36, 53, .82);
    --cb-dash-panel-strong: rgba(41, 42, 61, .92);
    --cb-dash-panel-soft: rgba(255, 255, 255, .055);
    --cb-dash-stroke: rgba(255, 255, 255, .075);
    --cb-dash-stroke-strong: rgba(255, 255, 255, .13);
    --cb-dash-text: #f8f9ff;
    --cb-dash-muted: #8d90a5;
    --cb-dash-faint: #62677f;
    --cb-dash-blue: #168bff;
    --cb-dash-blue-2: #55c9ff;
    --cb-dash-pink: #2f7ea8;
    --cb-dash-purple: #6d84a6;
    --cb-dash-teal: #36e4da;
    --cb-dash-amber: #ffbd4a;
    --cb-dash-radius-xl: 24px;
    --cb-dash-radius-lg: 18px;
    --cb-dash-radius-md: 14px;
    --cb-dash-shadow: 0 28px 70px rgba(0, 0, 0, .28);
    --cb-dash-ease: cubic-bezier(.22, 1, .36, 1);
}

html:not(.studio-theme-dark) {
    --cb-dash-bg: #eef4ff;
    --cb-dash-bg-2: #f8fbff;
    --cb-dash-panel: rgba(255, 255, 255, .82);
    --cb-dash-panel-strong: rgba(255, 255, 255, .94);
    --cb-dash-panel-soft: rgba(20, 39, 75, .06);
    --cb-dash-stroke: rgba(21, 34, 64, .08);
    --cb-dash-stroke-strong: rgba(21, 34, 64, .14);
    --cb-dash-text: #101424;
    --cb-dash-muted: #6a7286;
    --cb-dash-faint: #8d96aa;
    --cb-dash-shadow: 0 24px 70px rgba(20, 44, 84, .12);
}

html.combeat-page-index.combeat-top-frame body,
html.combeat-page-index.combeat-top-frame .app-shell {
    background:
        radial-gradient(circle at 16% 0%, rgba(43, 116, 255, .20), transparent 30%),
        radial-gradient(circle at 84% 10%, rgba(53, 224, 196, .07), transparent 28%),
        linear-gradient(135deg, var(--cb-dash-bg) 0%, var(--cb-dash-bg-2) 100%) !important;
    color: var(--cb-dash-text) !important;
}

html.combeat-page-index.combeat-top-frame .sidebar {
    width: 92px !important;
    min-width: 92px !important;
    padding: 18px 12px 22px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    gap: 18px !important;
}

html.combeat-page-index.combeat-top-frame .brand {
    width: 62px !important;
    height: 62px !important;
    flex: 0 0 62px !important;
    cursor: pointer !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.9) !important;
    transition: transform .22s var(--cb-dash-ease), box-shadow .22s ease !important;
}

html.combeat-page-index.combeat-top-frame .brand:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 18px 42px rgba(22,139,255,.24), inset 0 1px 0 rgba(255,255,255,.95) !important;
}

html.combeat-page-index.combeat-top-frame .brand-mark {
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
    border: 0 !important;
    border-radius: 17px !important;
    background: transparent !important;
}

html.combeat-page-index.combeat-top-frame .brand-mark img {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain !important;
}

html.combeat-page-index.combeat-top-frame .nav {
    gap: 13px !important;
    overflow: visible !important;
    padding: 6px 0 !important;
}

html.combeat-page-index.combeat-top-frame .nav-item,
html.combeat-page-index.combeat-top-frame .side-btn {
    width: 66px !important;
    height: 58px !important;
    flex: 0 0 58px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: transparent !important;
    color: color-mix(in srgb, var(--cb-dash-text) 47%, transparent) !important;
    box-shadow: none !important;
    gap: 6px !important;
    overflow: visible !important;
}

html.combeat-page-index.combeat-top-frame .nav-item::after {
    content: "";
    position: absolute;
    right: -12px;
    top: 50%;
    width: 3px;
    height: 34px;
    border-radius: 999px;
    background: transparent;
    transform: translateY(-50%) scaleY(.4);
    transition: background .18s ease, transform .22s var(--cb-dash-ease), opacity .18s ease;
    opacity: 0;
}

html.combeat-page-index.combeat-top-frame .nav-item:hover,
html.combeat-page-index.combeat-top-frame .side-home-btn:hover,
html.combeat-page-index.combeat-top-frame .side-btn:hover,
html.combeat-page-index.combeat-top-frame .brand.active {
    color: var(--cb-dash-text) !important;
    transform: translateY(-1px) !important;
}

html.combeat-page-index.combeat-top-frame .nav-item.active {
    color: #f7fbff !important;
    background: transparent !important;
}

html.combeat-page-index.combeat-top-frame .nav-item.active::after {
    background: linear-gradient(180deg, var(--cb-dash-blue), var(--cb-dash-blue-2));
    transform: translateY(-50%) scaleY(1);
    opacity: 1;
}

html.combeat-page-index.combeat-top-frame .nav-item svg,
html.combeat-page-index.combeat-top-frame .side-home-btn svg,
html.combeat-page-index.combeat-top-frame .side-btn svg,
html.combeat-page-index.combeat-top-frame .nav-item i,
html.combeat-page-index.combeat-top-frame .side-home-btn i,
html.combeat-page-index.combeat-top-frame .side-btn i {
    width: 23px !important;
    height: 23px !important;
    stroke-width: 2.15 !important;
    fill: none !important;
    filter: none !important;
}

html.combeat-page-index.combeat-top-frame .nav-item.active svg {
    color: var(--cb-dash-blue) !important;
    fill: color-mix(in srgb, var(--cb-dash-blue) 72%, transparent) !important;
    filter: drop-shadow(0 8px 16px rgba(22,139,255,.34)) !important;
}

html.combeat-page-index.combeat-top-frame .side-home-btn {
    margin: 2px 0 4px !important;
    background: rgba(255,255,255,.055) !important;
    color: var(--cb-dash-text) !important;
    border: 1px solid var(--cb-dash-stroke) !important;
}

html.combeat-page-index.combeat-top-frame .side-home-btn:hover {
    background: rgba(22,139,255,.14) !important;
    border-color: rgba(22,139,255,.28) !important;
}

html.combeat-page-index.combeat-top-frame .side-home-btn svg,
html.combeat-page-index.combeat-top-frame .side-home-btn i {
    color: var(--cb-dash-blue) !important;
}

html.combeat-page-index.combeat-top-frame .label {
    display: block !important;
    opacity: 1 !important;
    max-width: 66px !important;
    color: currentColor !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
}

html.combeat-page-index.combeat-top-frame .side-actions {
    margin: auto 0 0 !important;
    gap: 13px !important;
}

html.combeat-page-index.combeat-top-frame .side-btn.icon-only {
    width: 50px !important;
    height: 42px !important;
    flex-basis: 42px !important;
}

html.combeat-page-index.combeat-top-frame .account-btn.is-user,
html.combeat-page-index.combeat-top-frame .account-btn.is-admin {
    height: 66px !important;
    flex-basis: 66px !important;
}

html.combeat-page-index.combeat-top-frame .account-level-mark {
    background: linear-gradient(135deg, var(--cb-dash-blue), var(--cb-dash-blue-2)) !important;
    color: #fff !important;
    width: 24px !important;
    height: 24px !important;
    box-shadow: 0 8px 18px rgba(22,139,255,.28) !important;
}

html.combeat-page-index.combeat-top-frame .stage {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html.combeat-page-index.combeat-top-frame .stage::before,
html.combeat-page-index.combeat-top-frame .stage::after {
    display: none !important;
}

html.combeat-page-index.combeat-top-frame .dashboard-view {
    position: absolute;
    inset: 0;
    display: none;
    overflow: auto;
    padding: 22px 28px 26px 26px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .28s ease, transform .32s var(--cb-dash-ease);
}

html.combeat-page-index.combeat-top-frame .dashboard-view.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

html.combeat-page-index.combeat-top-frame iframe {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

html.combeat-page-index.combeat-top-frame .dash-topbar {
    min-height: 76px;
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto minmax(300px, 470px) 48px auto;
    align-items: center;
    gap: 24px;
    padding: 0 4px 20px 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

html.combeat-page-index.combeat-top-frame .dash-profile,
html.combeat-page-index.combeat-top-frame .dash-flag,
html.combeat-page-index.combeat-top-frame .dash-search,
html.combeat-page-index.combeat-top-frame .dash-message-btn,
html.combeat-page-index.combeat-top-frame .dash-icon-btn {
    display: flex;
    align-items: center;
}

html.combeat-page-index.combeat-top-frame .dash-profile {
    gap: 16px;
    min-width: 0;
}

html.combeat-page-index.combeat-top-frame .dash-logo-orb {
    width: 58px;
    height: 58px;
    border-radius: 999px;
    padding: 6px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 16px 34px rgba(0,0,0,.18);
}

html.combeat-page-index.combeat-top-frame .dash-logo-orb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

html.combeat-page-index.combeat-top-frame .dash-profile h1 {
    margin: 0;
    font-size: clamp(24px, 2vw, 32px);
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: 0;
    color: var(--cb-dash-text);
}

html.combeat-page-index.combeat-top-frame .dash-profile p,
html.combeat-page-index.combeat-top-frame .dash-section-head p,
html.combeat-page-index.combeat-top-frame .dash-panel-head p {
    margin: 7px 0 0;
    color: var(--cb-dash-muted);
    font-size: 14px;
    line-height: 1.35;
}

html.combeat-page-index.combeat-top-frame .dash-flag {
    gap: 12px;
    color: var(--cb-dash-text);
    font-size: 15px;
    font-weight: 900;
    white-space: nowrap;
}

html.combeat-page-index.combeat-top-frame .dash-flag-icon,
html.combeat-page-index.combeat-top-frame .dash-icon-btn,
html.combeat-page-index.combeat-top-frame .dash-square-plus {
    width: 48px;
    height: 48px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.045);
    border: 1px solid var(--cb-dash-stroke);
    color: var(--cb-dash-text);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

html.combeat-page-index.combeat-top-frame .dash-search {
    height: 48px;
    gap: 12px;
    padding: 0 16px;
    border-radius: 18px;
    background: rgba(255,255,255,.035);
    border: 1px solid transparent;
    color: var(--cb-dash-muted);
}

html.combeat-page-index.combeat-top-frame .dash-search:focus-within {
    border-color: rgba(22,139,255,.34);
    box-shadow: 0 0 0 4px rgba(22,139,255,.08);
}

html.combeat-page-index.combeat-top-frame .dash-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--cb-dash-text);
    font: 700 14px/1.2 inherit;
}

html.combeat-page-index.combeat-top-frame .dash-search input::placeholder {
    color: color-mix(in srgb, var(--cb-dash-muted) 72%, transparent);
}

html.combeat-page-index.combeat-top-frame .dash-message-btn,
html.combeat-page-index.combeat-top-frame .dash-primary-action,
html.combeat-page-index.combeat-top-frame .dash-secondary-action,
html.combeat-page-index.combeat-top-frame .dash-show-all,
html.combeat-page-index.combeat-top-frame .dash-panel-head button {
    height: 48px;
    border: 0;
    border-radius: 18px;
    cursor: pointer;
    color: var(--cb-dash-text);
    background: rgba(255,255,255,.065);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 900;
    transition: transform .2s var(--cb-dash-ease), box-shadow .2s ease, background .2s ease;
}

html.combeat-page-index.combeat-top-frame .dash-message-btn {
    color: #4aa6ff;
}

html.combeat-page-index.combeat-top-frame :is(.dash-message-btn, .dash-icon-btn, .dash-primary-action, .dash-secondary-action, .dash-show-all, .dash-panel-head button, .dash-square-plus):hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(0,0,0,.18);
}

html.combeat-page-index.combeat-top-frame .dash-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 420px);
    gap: 28px;
    padding-top: 28px;
    min-height: calc(100vh - 126px);
}

html.combeat-page-index.combeat-top-frame .dash-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

html.combeat-page-index.combeat-top-frame .dash-section-head,
html.combeat-page-index.combeat-top-frame .dash-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

html.combeat-page-index.combeat-top-frame .dash-section-head h2,
html.combeat-page-index.combeat-top-frame .dash-panel-head h3 {
    margin: 0;
    font-size: clamp(22px, 2vw, 31px);
    line-height: 1.08;
    font-weight: 950;
    letter-spacing: 0;
    color: var(--cb-dash-text);
}

html.combeat-page-index.combeat-top-frame .dash-panel-head h3 {
    font-size: 23px;
}

html.combeat-page-index.combeat-top-frame .dash-head-tools {
    display: flex;
    align-items: center;
    gap: 16px;
}

html.combeat-page-index.combeat-top-frame .dash-head-tools span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #4aa6ff;
    font-size: 13px;
    font-weight: 900;
}

html.combeat-page-index.combeat-top-frame .dash-head-tools button {
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.045);
    color: var(--cb-dash-muted);
}

html.combeat-page-index.combeat-top-frame .dash-feature-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

html.combeat-page-index.combeat-top-frame .dash-feature-card,
html.combeat-page-index.combeat-top-frame .dash-stack-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--cb-dash-stroke);
    border-radius: var(--cb-dash-radius-xl);
    min-height: 210px;
    padding: 28px;
    cursor: pointer;
    color: #fff;
    isolation: isolate;
    box-shadow: var(--cb-dash-shadow);
    transition: transform .24s var(--cb-dash-ease), box-shadow .24s ease, border-color .24s ease, opacity .2s ease;
}

html.combeat-page-index.combeat-top-frame .dash-feature-card:hover,
html.combeat-page-index.combeat-top-frame .dash-stack-card:hover,
html.combeat-page-index.combeat-top-frame .dash-mini-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,.18);
    box-shadow: 0 20px 46px rgba(0,0,0,.25);
}

html.combeat-page-index.combeat-top-frame .dash-card-teal {
    background:
        radial-gradient(circle at 78% 86%, rgba(52, 232, 219, .28), transparent 34%),
        linear-gradient(135deg, rgba(25,41,56,.98), rgba(18,87,92,.90));
}

html.combeat-page-index.combeat-top-frame .dash-card-pink {
    background:
        radial-gradient(circle at 82% 80%, rgba(22, 140, 255, .24), transparent 35%),
        linear-gradient(135deg, rgba(35,42,58,.98), rgba(28,70,108,.88));
}

html.combeat-page-index.combeat-top-frame .dash-card-slate {
    background:
        radial-gradient(circle at 88% 84%, rgba(189, 224, 232, .24), transparent 34%),
        linear-gradient(135deg, rgba(38,42,60,.98), rgba(49,63,79,.88));
}

html.combeat-page-index.combeat-top-frame .dash-card-glow,
html.combeat-page-index.combeat-top-frame .dash-stack-card::before {
    content: "";
    position: absolute;
    inset: -50%;
    background:
        linear-gradient(115deg, transparent 18%, rgba(255,255,255,.06) 32%, transparent 48%);
    transform: rotate(-12deg);
    z-index: -1;
    opacity: .8;
}

html.combeat-page-index.combeat-top-frame .dash-card-icon,
html.combeat-page-index.combeat-top-frame .dash-mini-card i,
html.combeat-page-index.combeat-top-frame .dash-mini-card svg {
    width: 58px;
    height: 58px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    background: rgba(16, 18, 29, .33);
    color: currentColor;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}

html.combeat-page-index.combeat-top-frame .dash-card-icon svg {
    width: 30px;
    height: 30px;
}

html.combeat-page-index.combeat-top-frame .dash-card-copy {
    position: absolute;
    top: 30px;
    left: 102px;
    right: 22px;
}

html.combeat-page-index.combeat-top-frame .dash-card-copy h3,
html.combeat-page-index.combeat-top-frame .dash-stack-card span {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 950;
    letter-spacing: 0;
}

html.combeat-page-index.combeat-top-frame .dash-card-copy p,
html.combeat-page-index.combeat-top-frame .dash-stack-card strong {
    display: block;
    margin-top: 8px;
    color: rgba(255,255,255,.62);
    font-size: 14px;
    font-weight: 750;
}

html.combeat-page-index.combeat-top-frame .dash-card-meta {
    position: absolute;
    left: 28px;
    bottom: 28px;
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: 16px;
    font-weight: 920;
}

html.combeat-page-index.combeat-top-frame .dash-work-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
    gap: 24px;
}

html.combeat-page-index.combeat-top-frame .dash-panel,
html.combeat-page-index.combeat-top-frame .dash-account-card {
    border: 1px solid var(--cb-dash-stroke);
    border-radius: var(--cb-dash-radius-lg);
    background: linear-gradient(180deg, var(--cb-dash-panel-strong), var(--cb-dash-panel));
    box-shadow: var(--cb-dash-shadow);
    padding: 26px;
    color: var(--cb-dash-text);
}

html.combeat-page-index.combeat-top-frame .dash-chart-panel {
    min-height: 310px;
}

html.combeat-page-index.combeat-top-frame .dash-chart-body {
    position: relative;
    min-height: 220px;
    margin-top: 20px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: stretch;
}

html.combeat-page-index.combeat-top-frame .dash-y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--cb-dash-muted);
    font-size: 12px;
    font-weight: 800;
    padding: 12px 0 18px;
}

html.combeat-page-index.combeat-top-frame .dash-line-chart {
    width: 100%;
    height: 100%;
    overflow: visible;
}

html.combeat-page-index.combeat-top-frame .dash-area {
    fill: url(#dashLineFill);
}

html.combeat-page-index.combeat-top-frame .dash-line {
    fill: none;
    stroke: var(--cb-dash-blue);
    stroke-width: 7;
    stroke-linecap: round;
    filter: drop-shadow(0 8px 16px rgba(22,139,255,.32));
}

html.combeat-page-index.combeat-top-frame .dash-line-chart circle {
    fill: #20243a;
    stroke: var(--cb-dash-blue);
    stroke-width: 5;
}

html.combeat-page-index.combeat-top-frame .dash-chart-tooltip {
    position: absolute;
    left: 48%;
    top: 34px;
    transform: translateX(-50%);
    border-radius: 17px;
    padding: 11px 15px;
    background: rgba(52, 56, 78, .84);
    box-shadow: 0 18px 35px rgba(0,0,0,.24);
}

html.combeat-page-index.combeat-top-frame .dash-chart-tooltip span {
    display: block;
    color: #4aa6ff;
    font-size: 12px;
    font-weight: 900;
}

html.combeat-page-index.combeat-top-frame .dash-chart-tooltip strong {
    display: block;
    margin-top: 4px;
    color: #fff;
    font-size: 15px;
    font-weight: 950;
}

html.combeat-page-index.combeat-top-frame .dash-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
}

html.combeat-page-index.combeat-top-frame .dash-mini-card {
    min-height: 112px;
    border: 1px solid var(--cb-dash-stroke);
    border-radius: 23px;
    background: rgba(255,255,255,.048);
    color: var(--cb-dash-text);
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 3px 14px;
    padding: 18px;
    text-align: left;
    cursor: pointer;
    transition: transform .24s var(--cb-dash-ease), box-shadow .24s ease, border-color .2s ease, opacity .2s ease;
}

html.combeat-page-index.combeat-top-frame .dash-mini-card i,
html.combeat-page-index.combeat-top-frame .dash-mini-card svg {
    grid-row: 1 / 3;
    width: 50px;
    height: 50px;
    border-radius: 18px;
    padding: 12px;
}

html.combeat-page-index.combeat-top-frame .dash-mini-card span {
    font-size: 15px;
    font-weight: 950;
    line-height: 1.15;
}

html.combeat-page-index.combeat-top-frame .dash-mini-card small {
    color: var(--cb-dash-muted);
    font-size: 12px;
    font-weight: 780;
    line-height: 1.35;
}

html.combeat-page-index.combeat-top-frame .mini-blue i,
html.combeat-page-index.combeat-top-frame .mini-blue svg { background: rgba(22,139,255,.18); color: #5cb6ff; }
html.combeat-page-index.combeat-top-frame .mini-purple i,
html.combeat-page-index.combeat-top-frame .mini-purple svg { background: rgba(109,132,166,.18); color: #cbd8f1; }
html.combeat-page-index.combeat-top-frame .mini-amber i,
html.combeat-page-index.combeat-top-frame .mini-amber svg { background: rgba(255,189,74,.16); color: #ffcf73; }
html.combeat-page-index.combeat-top-frame .mini-cyan i,
html.combeat-page-index.combeat-top-frame .mini-cyan svg { background: rgba(54,228,218,.16); color: #62eee4; }
html.combeat-page-index.combeat-top-frame .mini-slate i,
html.combeat-page-index.combeat-top-frame .mini-slate svg { background: rgba(180,198,230,.15); color: #d5e2ff; }

html.combeat-page-index.combeat-top-frame .dash-right-panel {
    min-width: 0;
}

html.combeat-page-index.combeat-top-frame .dash-account-card {
    min-height: 100%;
    padding: 28px;
}

html.combeat-page-index.combeat-top-frame .dash-balance {
    margin-top: 28px;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
}

html.combeat-page-index.combeat-top-frame .dash-wallet {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: rgba(255,255,255,.065);
}

html.combeat-page-index.combeat-top-frame .dash-balance span {
    color: #4aa6ff;
    font-size: 13px;
    font-weight: 880;
}

html.combeat-page-index.combeat-top-frame .dash-balance strong {
    display: block;
    margin-top: 4px;
    color: var(--cb-dash-text);
    font-size: clamp(24px, 2.4vw, 39px);
    line-height: 1;
    font-weight: 950;
}

html.combeat-page-index.combeat-top-frame .dash-action-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 24px;
}

html.combeat-page-index.combeat-top-frame .dash-primary-action {
    background: linear-gradient(135deg, #148dff, #0d75f7);
    color: #fff;
    box-shadow: 0 17px 36px rgba(18,130,255,.24);
}

html.combeat-page-index.combeat-top-frame .dash-secondary-action {
    background: rgba(255,255,255,.09);
}

html.combeat-page-index.combeat-top-frame .dash-stack-card {
    min-height: 160px;
    margin-top: 26px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding-left: 34px;
}

html.combeat-page-index.combeat-top-frame .dash-stack-card i,
html.combeat-page-index.combeat-top-frame .dash-stack-card svg {
    width: 34px;
    height: 34px;
    margin-bottom: 12px;
}

html.combeat-page-index.combeat-top-frame .dash-stack-card.card-a {
    background:
        radial-gradient(circle at 16% 20%, rgba(60,236,228,.34), transparent 27%),
        linear-gradient(135deg, #152235, #1d5f8f 58%, #1e9c9c);
}

html.combeat-page-index.combeat-top-frame .dash-stack-card.card-b {
    background:
        radial-gradient(circle at 20% 18%, rgba(255,255,255,.16), transparent 28%),
        radial-gradient(circle at 86% 24%, rgba(197,138,31,.32), transparent 35%),
        linear-gradient(135deg, #202838, #26384c 54%, #6b5a32);
}

html.combeat-page-index.combeat-top-frame .dash-show-all {
    width: min(230px, 100%);
    margin: 28px auto 0;
    display: flex;
    border-radius: 26px;
    background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.075));
}

html.combeat-page-index.combeat-top-frame .dash-search-hidden {
    display: none !important;
}

html.combeat-page-index.combeat-top-frame .dash-search-match {
    outline: 2px solid rgba(85,201,255,.48);
    outline-offset: 3px;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-inspiration, .combeat-page-admin, .combeat-page-account, .combeat-page-api-settings, .combeat-page-login):not(.combeat-page-canvas) body {
    background:
        radial-gradient(circle at 15% 0%, rgba(43, 116, 255, .18), transparent 30%),
        radial-gradient(circle at 85% 8%, rgba(53, 224, 196, .07), transparent 28%),
        linear-gradient(135deg, var(--cb-dash-bg) 0%, var(--cb-dash-bg-2) 100%) !important;
    color: var(--cb-dash-text) !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-inspiration, .combeat-page-admin, .combeat-page-account, .combeat-page-api-settings) :is(.console-card, .tool-panel, .control-panel, .result-frame, .engine-panel, .z-param-panel, .composer, .panel, .card:not(.masonry .card), .stat-card, .notice-card, .record-card, .profile-mini, .config-card, .settings-card) {
    border: 1px solid var(--cb-dash-stroke) !important;
    border-radius: var(--cb-dash-radius-lg) !important;
    background: linear-gradient(180deg, var(--cb-dash-panel-strong), var(--cb-dash-panel)) !important;
    box-shadow: var(--cb-dash-shadow) !important;
    color: var(--cb-dash-text) !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-admin, .combeat-page-account, .combeat-page-api-settings) :is(.topbar, .toolbar, .section-head, .panel-head) {
    border: 0 !important;
    box-shadow: none !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-canvas, .combeat-page-admin, .combeat-page-account, .combeat-page-api-settings) :is(.select-shell, .model-select-shell, .select-wrap) {
    border-radius: 18px !important;
    overflow: hidden !important;
    background: rgba(255,255,255,.055) !important;
    border: 1px solid var(--cb-dash-stroke) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-canvas, .combeat-page-admin, .combeat-page-account, .combeat-page-api-settings) :is(.select-shell, .model-select-shell, .select-wrap)::after {
    right: 15px !important;
    color: #eff6ff !important;
    opacity: .86 !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-canvas, .combeat-page-admin, .combeat-page-account, .combeat-page-api-settings) body :is(select, .provider-select, .engine-select, .model-select, .select-lite, .size-select, .nano-input:is(select), .input:is(select)) {
    height: 48px !important;
    min-height: 48px !important;
    border: 1px solid var(--cb-dash-stroke) !important;
    border-radius: 18px !important;
    background-color: rgba(255,255,255,.055) !important;
    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='18'%20height='18'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23f4f8ff'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E"),
        linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.035)) !important;
    background-repeat: no-repeat, repeat !important;
    background-position: right 15px center, 0 0 !important;
    background-size: 18px 18px, auto !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
    color: var(--cb-dash-text) !important;
    padding-right: 44px !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, .combeat-page-canvas, .combeat-page-admin, .combeat-page-account, .combeat-page-api-settings) body :is(select, .provider-select, .engine-select, .model-select, .select-lite, .size-select) {
    background-color: rgba(255,255,255,.78) !important;
    color: #111827 !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-canvas, .combeat-page-admin, .combeat-page-account, .combeat-page-api-settings) :is(.mode-switch, .mode-switcher, .provider-switch, .mini-ratio, .resolution-toggle, .tab-switch, .switch-row, .btn-row, .toolbar, .top-actions, .section-actions, .gate-head-actions) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-canvas, .combeat-page-admin, .combeat-page-account, .combeat-page-api-settings, .combeat-page-inspiration) :is(.btn, .glass-btn, .btn-render, .gen-btn, .comfy-run, .send-btn, .primary-btn, button.primary, .btn.primary, .publish-inspiration-btn, .gen-cascade-btn, .save-btn, .api-page-save-btn) {
    min-height: 48px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #188cff, #0d74f5) !important;
    color: #fff !important;
    box-shadow: 0 16px 34px rgba(22,139,255,.25) !important;
    font-weight: 930 !important;
    letter-spacing: 0 !important;
    transition: transform .2s var(--cb-dash-ease), box-shadow .2s ease, filter .2s ease !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-canvas, .combeat-page-admin, .combeat-page-account, .combeat-page-api-settings, .combeat-page-inspiration) :is(.btn, .glass-btn, .btn-render, .gen-btn, .comfy-run, .send-btn, .primary-btn, button.primary, .btn.primary, .publish-inspiration-btn, .gen-cascade-btn, .save-btn, .api-page-save-btn):hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.06) !important;
    box-shadow: 0 22px 44px rgba(22,139,255,.32) !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-canvas, .combeat-page-admin, .combeat-page-account, .combeat-page-api-settings, .combeat-page-inspiration) :is(.btn:not(.primary):not(.danger), .glass-btn:not(.primary), .action-btn:not(.primary), .copy-btn, .replicate-btn, .thread-delete, .peek-btn, .ghost-btn, .icon-btn, .tool-btn, button.mini, .btn.mini, .mode-switch button, .mode-switcher button, .provider-switch button, .mini-ratio button, .resolution-option, .tab-btn, .key-btn, .api-page-delete-btn:not(.danger-btn)) {
    min-height: 48px !important;
    border: 1px solid var(--cb-dash-stroke) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.065) !important;
    color: var(--cb-dash-text) !important;
    box-shadow: none !important;
    font-weight: 860 !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-canvas, .combeat-page-admin, .combeat-page-account, .combeat-page-api-settings) :is(.mode-switch button.active, .mode-switcher button.active, .provider-switch button.active, .mini-ratio button.active, .resolution-option.active, .tab-btn.active) {
    background: linear-gradient(135deg, #188cff, #55c9ff) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 12px 26px rgba(22,139,255,.24) !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) :is(.result-frame, .preview-panel, .preview-card, .upload-zone, .drop-zone, .main-preview)::before,
html.combeat-page-gpt-chat .chat-empty-state::before {
    content: "";
    width: 72px;
    height: 72px;
    border-radius: 26px;
    background:
        radial-gradient(circle at 25% 20%, rgba(255,255,255,.30), transparent 28%),
        linear-gradient(135deg, rgba(54,228,218,.72), rgba(22,139,255,.84) 100%);
    box-shadow: 0 18px 42px rgba(22,139,255,.24);
    display: block;
    margin: 0 auto 16px;
    animation: cbIdleFloat 3.4s ease-in-out infinite;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) :is(.result-frame, .preview-panel, .preview-card, .upload-zone, .drop-zone, .main-preview) {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) :is(.result-frame, .preview-panel, .preview-card, .upload-zone, .drop-zone, .main-preview)::before {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) translateY(-44px) rotate(-2deg) !important;
    margin: 0 !important;
    z-index: 0 !important;
    animation-name: cbIdleFloatCentered !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) :is(.result-frame, .preview-panel, .preview-card, .upload-zone, .drop-zone, .main-preview) > :is(#placeholder, #emptyState, #loader, #loadingState) {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    text-align: center !important;
    z-index: 1 !important;
    pointer-events: none !important;
    transform: translateY(46px) !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) :is(.result-frame, .preview-panel, .preview-card, .upload-zone, .drop-zone, .main-preview) > :is(#placeholder.hidden, #emptyState.hidden, #loader.hidden, #loadingState.hidden) {
    display: none !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) :is(#placeholder, #emptyState) > i,
html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) :is(#placeholder, #emptyState) > svg {
    display: none !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) :is(#placeholder, #emptyState) > p,
html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) :is(#loader, #loadingState) > p {
    margin: 0 !important;
    color: var(--cb-dash-muted) !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) :is(#loader, #loadingState) > div {
    margin-bottom: 0 !important;
}

@keyframes cbIdleFloat {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-8px) rotate(2deg); }
}

@keyframes cbIdleFloatCentered {
    0%, 100% { transform: translate(-50%, -50%) translateY(-44px) rotate(-2deg); }
    50% { transform: translate(-50%, -50%) translateY(-54px) rotate(2deg); }
}

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

html.combeat-page-inspiration .masonry .card {
    border-radius: 14px !important;
    background: linear-gradient(180deg, var(--cb-dash-panel-strong), var(--cb-dash-panel)) !important;
    border: 1px solid var(--cb-dash-stroke) !important;
    box-shadow: 0 16px 38px rgba(0,0,0,.20) !important;
}

html.combeat-page-inspiration .masonry .card img,
html.combeat-page-inspiration .masonry .card video {
    border-radius: 10px !important;
}

html:is(.combeat-page-admin, .combeat-page-account) .cards > :nth-child(4n + 1),
html:is(.combeat-page-admin, .combeat-page-account) .stat-card:nth-child(4n + 1) {
    background:
        radial-gradient(circle at 85% 20%, rgba(54,228,218,.24), transparent 34%),
        linear-gradient(180deg, var(--cb-dash-panel-strong), var(--cb-dash-panel)) !important;
}

html:is(.combeat-page-admin, .combeat-page-account) .cards > :nth-child(4n + 2),
html:is(.combeat-page-admin, .combeat-page-account) .stat-card:nth-child(4n + 2) {
    background:
        radial-gradient(circle at 84% 22%, rgba(53,224,196,.10), transparent 34%),
        linear-gradient(180deg, var(--cb-dash-panel-strong), var(--cb-dash-panel)) !important;
}

html:is(.combeat-page-admin, .combeat-page-account) .cards > :nth-child(4n + 3),
html:is(.combeat-page-admin, .combeat-page-account) .stat-card:nth-child(4n + 3) {
    background:
        radial-gradient(circle at 84% 22%, rgba(22,139,255,.26), transparent 34%),
        linear-gradient(180deg, var(--cb-dash-panel-strong), var(--cb-dash-panel)) !important;
}

@media (max-width: 1220px) {
    html.combeat-page-index.combeat-top-frame .dash-topbar {
        grid-template-columns: minmax(220px, 1fr) minmax(260px, 440px) 48px auto;
    }
    html.combeat-page-index.combeat-top-frame .dash-flag {
        display: none;
    }
    html.combeat-page-index.combeat-top-frame .dash-content {
        grid-template-columns: minmax(0, 1fr);
    }
    html.combeat-page-index.combeat-top-frame .dash-right-panel {
        display: none;
    }
}

@media (max-width: 980px) {
    html.combeat-page-index.combeat-top-frame .dash-feature-row,
    html.combeat-page-index.combeat-top-frame .dash-work-grid {
        grid-template-columns: 1fr;
    }
    html.combeat-page-index.combeat-top-frame .dash-topbar {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

@media (max-width: 760px) {
    html.combeat-page-index.combeat-top-frame .sidebar {
        width: 100% !important;
        min-width: 0 !important;
        height: 82px !important;
        padding: 10px 12px !important;
        overflow-x: auto !important;
        flex-direction: row !important;
    }
    html.combeat-page-index.combeat-top-frame .nav {
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }
    html.combeat-page-index.combeat-top-frame .nav-item::after {
        display: none !important;
    }
    html.combeat-page-index.combeat-top-frame .dashboard-view {
        padding: 18px 16px 24px !important;
    }
    html.combeat-page-index.combeat-top-frame .dash-feature-card {
        min-height: 190px;
    }
}

html.combeat-page-index.combeat-top-frame body .sidebar .nav .nav-item > .label {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

html.combeat-page-index.combeat-top-frame body .sidebar .side-home-btn > .label {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

html.combeat-page-index.combeat-top-frame body .sidebar .side-btn.icon-only > .label {
    display: none !important;
}

html.combeat-page-index.combeat-top-frame.combeat-dashboard-mode .app-shell {
    display: block !important;
}

html.combeat-page-index.combeat-top-frame.combeat-dashboard-mode .sidebar {
    display: none !important;
}

html.combeat-page-index.combeat-top-frame.combeat-dashboard-mode .stage {
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
}

html.combeat-page-index.combeat-top-frame.combeat-dashboard-mode .dashboard-view {
    padding: 26px 34px 28px !important;
}

html.combeat-page-index.combeat-top-frame.combeat-dashboard-mode .dash-topbar {
    grid-template-columns: minmax(230px, .9fr) auto minmax(360px, 520px) 48px auto !important;
}

html.combeat-page-index.combeat-top-frame.combeat-dashboard-mode .dash-profile {
    gap: 14px !important;
}

html.combeat-page-index.combeat-top-frame.combeat-dashboard-mode .dash-logo-orb {
    width: 54px !important;
    height: 54px !important;
    flex: 0 0 54px !important;
}

html.combeat-page-index.combeat-top-frame.combeat-dashboard-mode .dash-content {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 410px) !important;
}

html.combeat-page-index.combeat-top-frame .dash-topbar {
    border-bottom: 0 !important;
    padding-bottom: 14px !important;
}

html.combeat-page-index.combeat-top-frame .dash-content {
    padding-top: 18px !important;
    gap: 24px !important;
    min-height: auto !important;
}

html.combeat-page-index.combeat-top-frame .dash-main {
    gap: 18px !important;
}

html.combeat-page-index.combeat-top-frame .dash-feature-card {
    min-height: 178px !important;
    padding: 24px !important;
}

html.combeat-page-index.combeat-top-frame .dash-card-copy {
    top: 26px !important;
    left: 92px !important;
}

html.combeat-page-index.combeat-top-frame .dash-card-meta {
    left: 24px !important;
    bottom: 22px !important;
}

html.combeat-page-index.combeat-top-frame .dash-work-grid {
    gap: 18px !important;
}

html.combeat-page-index.combeat-top-frame .dash-panel,
html.combeat-page-index.combeat-top-frame .dash-account-card {
    padding: 22px !important;
}

html.combeat-page-index.combeat-top-frame .dash-chart-panel {
    min-height: 246px !important;
}

html.combeat-page-index.combeat-top-frame .dash-chart-body {
    min-height: 160px !important;
    margin-top: 12px !important;
}

html.combeat-page-index.combeat-top-frame .dash-mini-grid {
    gap: 10px !important;
    margin-top: 8px !important;
}

html.combeat-page-index.combeat-top-frame .dash-mini-card {
    min-height: 58px !important;
    border-radius: 20px !important;
    padding: 10px !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
}

html.combeat-page-index.combeat-top-frame .dash-mini-card i,
html.combeat-page-index.combeat-top-frame .dash-mini-card svg {
    width: 36px !important;
    height: 36px !important;
    border-radius: 14px !important;
    padding: 8px !important;
}

html.combeat-page-index.combeat-top-frame .dash-mini-card span {
    font-size: 13px !important;
}

html.combeat-page-index.combeat-top-frame .dash-mini-card small {
    font-size: 11px !important;
    line-height: 1.2 !important;
}

/* Final layout repair: keep chat empty state clean and make model selectors readable. */
html.combeat-page-gpt-chat .messages.is-empty {
    justify-content: center !important;
    align-items: center !important;
    padding: 80px 32px 250px !important;
}

html.combeat-page-gpt-chat .chat-empty-state {
    min-height: 180px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    transform: none !important;
    text-align: center !important;
}

html.combeat-page-gpt-chat .chat-empty-state > :is(i, svg) {
    display: none !important;
}

html.combeat-page-gpt-chat .chat-empty-state::before {
    content: "" !important;
    width: 76px !important;
    height: 76px !important;
    flex: 0 0 76px !important;
    border-radius: 26px !important;
    background:
        radial-gradient(circle at 25% 20%, rgba(255,255,255,.30), transparent 28%),
        linear-gradient(135deg, rgba(54,228,218,.76), rgba(22,139,255,.86)) !important;
    box-shadow: 0 18px 42px rgba(22,139,255,.24) !important;
    display: block !important;
    margin: 0 0 4px !important;
    animation: cbIdleFloat 3.4s ease-in-out infinite !important;
}

html.combeat-page-gpt-chat .chat-empty-state div {
    margin: 0 !important;
    color: var(--cb-dash-muted) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .34em !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle, .combeat-page-gpt-chat, .combeat-page-canvas, .combeat-page-admin, .combeat-page-account, .combeat-page-api-settings) :is(.select-shell, .model-select-shell, .select-wrap)::after {
    display: none !important;
    content: none !important;
}

html:is(.combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) .engine-select-grid {
    display: grid !important;
    grid-template-columns: minmax(180px, .85fr) minmax(260px, 1.15fr) !important;
    gap: 12px !important;
    align-items: center !important;
}

html:is(.combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) .engine-select-grid > :is(.select-shell, select) {
    min-width: 0 !important;
    width: 100% !important;
}

html:is(.combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) .engine-select-grid select {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    padding-left: 18px !important;
    padding-right: 44px !important;
}

html.combeat-page-gpt-chat .composer {
    width: min(1320px, calc(100% - 72px)) !important;
}

html.combeat-page-gpt-chat .composer-inside-foot {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
}

html.combeat-page-gpt-chat .inline-controls {
    grid-template-columns: minmax(138px, 148px) minmax(500px, 1fr) !important;
    column-gap: 12px !important;
}

html.combeat-page-gpt-chat .provider-switch {
    grid-template-columns: minmax(210px, .82fr) minmax(360px, 1.18fr) !important;
    gap: 12px !important;
}

html.combeat-page-gpt-chat .provider-select {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    padding-left: 18px !important;
    padding-right: 44px !important;
}

@media (max-width: 1180px) {
    html.combeat-page-gpt-chat .composer {
        width: calc(100% - 36px) !important;
    }

    html.combeat-page-gpt-chat .composer-inside-foot,
    html.combeat-page-gpt-chat .inline-controls,
    html.combeat-page-gpt-chat .provider-switch {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html:is(.combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) .engine-select-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

html.combeat-page-index.combeat-top-frame .dash-balance {
    margin-top: 20px !important;
}

html.combeat-page-index.combeat-top-frame .dash-action-row {
    margin-top: 18px !important;
}

html.combeat-page-index.combeat-top-frame .dash-stack-card {
    min-height: 126px !important;
    margin-top: 18px !important;
    border-radius: 28px !important;
}

html.combeat-page-index.combeat-top-frame .dash-show-all {
    margin-top: 18px !important;
}

/* Final functional-page repair: keep controls inside the visible page and stop select overlap. */
html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) .container-box {
    width: 100% !important;
    max-width: 1280px !important;
    min-height: 100vh !important;
    margin: 0 auto !important;
    padding: 34px 64px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
}

html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) header {
    margin-bottom: 22px !important;
    flex: 0 0 auto !important;
}

html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) header nav {
    display: none !important;
}

html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) header h1 {
    font-size: clamp(28px, 3vw, 40px) !important;
    line-height: 1 !important;
}

html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein) .container-box > main {
    display: grid !important;
    flex: 1 1 auto !important;
    height: calc(100vh - 124px) !important;
    min-height: 0 !important;
    align-items: stretch !important;
    gap: 36px !important;
}

html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein) .container-box > main > div {
    grid-column: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

html.combeat-page-online .container-box > main {
    grid-template-columns: minmax(430px, 5fr) minmax(0, 7fr) !important;
}

html:is(.combeat-page-enhance, .combeat-page-klein) .container-box > main {
    grid-template-columns: minmax(420px, 5fr) minmax(0, 7fr) !important;
}

html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein) .container-box > main > div:first-child {
    display: flex !important;
    min-height: 0 !important;
    flex-direction: column !important;
    gap: 14px !important;
}

html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein) .container-box > main > div:first-child > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

html.combeat-page-online #promptInput,
html.combeat-page-klein #promptInput {
    height: 82px !important;
    min-height: 82px !important;
    max-height: 82px !important;
}

html.combeat-page-enhance #msPromptInput {
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
}

html:is(.combeat-page-online, .combeat-page-klein) .container-box > main > div:first-child section {
    gap: 10px !important;
}

html:is(.combeat-page-online, .combeat-page-klein) .container-box > main > div:first-child section:nth-of-type(2) .grid {
    gap: 12px !important;
}

html:is(.combeat-page-online, .combeat-page-klein) .container-box > main > div:first-child section:nth-of-type(2) .upload-item {
    aspect-ratio: 1 / .82 !important;
    min-height: 0 !important;
}

html:is(.combeat-page-enhance, .combeat-page-angle) #dropzone {
    height: clamp(190px, 28vh, 236px) !important;
    aspect-ratio: auto !important;
}

html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein) .tool-panel,
html:is(.combeat-page-enhance, .combeat-page-klein) .engine-panel {
    padding: 12px !important;
    gap: 10px !important;
}

html.combeat-page-enhance .container-box > main > div:first-child section:nth-of-type(2) {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

html.combeat-page-enhance .container-box > main > div:first-child section:nth-of-type(2) > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

html.combeat-page-enhance .container-box > main > div:first-child section:nth-of-type(2) .space-y-5 > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

html.combeat-page-enhance .container-box > main > div:first-child section:nth-of-type(2) .space-y-5 {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

html.combeat-page-online .size-row,
html:is(.combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) .engine-select-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) :is(.size-field, .select-shell, .model-select-shell, .select-wrap) {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

html:is(.combeat-page-online, .combeat-page-zimage, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) :is(select.size-select, select.nano-input, select.engine-select, select.model-select) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein) #genBtn {
    height: 52px !important;
    min-height: 52px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    flex: 0 0 52px !important;
}

html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein) .container-box > main > div:last-child {
    min-height: 0 !important;
}

html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein) #resultBox {
    height: 100% !important;
    min-height: 0 !important;
    max-height: calc(100vh - 136px) !important;
}

html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein) .container-box > section.mt-32,
html.combeat-page-angle .container-box > section.mt-32 {
    margin-top: 40px !important;
}

html.combeat-page-angle .container-box > main.space-y-12 {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: calc(100vh - 132px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: minmax(220px, 1fr) minmax(220px, .94fr) !important;
    gap: 18px !important;
    align-items: stretch !important;
}

html.combeat-page-angle .container-box > main.space-y-12 > .grid {
    display: contents !important;
}

html.combeat-page-angle .container-box > main.space-y-12 section {
    min-width: 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

html.combeat-page-angle .container-box > main.space-y-12 section h3 {
    margin: 0 !important;
    flex: 0 0 auto !important;
}

html.combeat-page-angle #cameraControl > div {
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    flex: 1 1 auto !important;
}

html.combeat-page-angle #promptInput {
    min-height: 70px !important;
    height: 70px !important;
    max-height: 70px !important;
    flex: 0 0 70px !important;
}

html.combeat-page-angle .container-box > main.space-y-12 section:nth-of-type(3) > .flex-1 {
    flex: 0 0 auto !important;
}

html.combeat-page-angle .container-box > main.space-y-12 section:nth-of-type(3) > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

html.combeat-page-angle .container-box > main.space-y-12 section:nth-of-type(3) .space-y-2,
html.combeat-page-angle .container-box > main.space-y-12 section:nth-of-type(3) .space-y-3 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

html.combeat-page-angle .container-box > main.space-y-12 > .grid:nth-of-type(2) > section:first-child {
    gap: 8px !important;
}

html.combeat-page-angle .container-box > main.space-y-12 > .grid:nth-of-type(2) > section:first-child > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

html.combeat-page-angle .container-box > main.space-y-12 > .grid:nth-of-type(2) > section:first-child > .flex-1 {
    flex: 0 0 auto !important;
}

/* Auth popup: blur the page behind the login/register card without adding an extra panel. */
html.combeat-page-index.combeat-top-frame .auth-modal,
html.combeat-page-index.combeat-top-frame .auth-modal.show {
    background:
        radial-gradient(circle at 24% 24%, rgba(45, 227, 157, .12), transparent 32%),
        radial-gradient(circle at 80% 20%, rgba(239, 61, 147, .14), transparent 34%),
        rgba(10, 12, 24, .46) !important;
    background-color: rgba(10, 12, 24, .46) !important;
    backdrop-filter: blur(22px) saturate(1.08) brightness(.82) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.08) brightness(.82) !important;
    transition: opacity .2s var(--cb-ease), backdrop-filter .2s var(--cb-ease);
}

html:not(.studio-theme-dark).combeat-page-index.combeat-top-frame .auth-modal,
html:not(.studio-theme-dark).combeat-page-index.combeat-top-frame .auth-modal.show {
    background:
        radial-gradient(circle at 24% 24%, rgba(88, 230, 255, .14), transparent 32%),
        radial-gradient(circle at 78% 18%, rgba(239, 61, 147, .12), transparent 34%),
        rgba(226, 236, 248, .48) !important;
    background-color: rgba(226, 236, 248, .48) !important;
    backdrop-filter: blur(22px) saturate(1.05) brightness(.94) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.05) brightness(.94) !important;
}

html.combeat-page-index.combeat-top-frame .auth-dialog {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html.combeat-page-index.combeat-top-frame .auth-frame {
    background: transparent !important;
}

html.combeat-page-login.embedded-auth,
html.combeat-page-login.embedded-auth body {
    background: transparent !important;
    background-color: transparent !important;
}

html.combeat-page-login.embedded-auth body::before,
html.combeat-page-login.embedded-auth body::after {
    display: none !important;
    content: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html.combeat-page-index.combeat-top-frame.combeat-dashboard-mode .dash-profile {
    display: none !important;
}

html.combeat-page-index.combeat-top-frame.combeat-dashboard-mode .dash-topbar {
    grid-template-columns: auto minmax(360px, 520px) 48px auto !important;
}

html.combeat-page-login.embedded-auth,
html.combeat-page-login.embedded-auth body {
    min-height: 0 !important;
    height: 100% !important;
    overflow: visible !important;
}

html.combeat-page-login.embedded-auth .shell {
    min-height: 100% !important;
    height: 100% !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    background: transparent !important;
}

html.combeat-page-index.combeat-top-frame .auth-dialog {
    width: min(560px, calc(100vw - 48px)) !important;
    height: min(760px, calc(100vh - 48px)) !important;
    max-height: calc(100vh - 48px) !important;
    overflow: visible !important;
}

html.combeat-page-index.combeat-top-frame .auth-frame {
    width: 100% !important;
    height: min(760px, calc(100vh - 48px)) !important;
    min-height: min(640px, calc(100vh - 48px)) !important;
    max-height: calc(100vh - 48px) !important;
    overflow: visible !important;
    color-scheme: dark !important;
}

html.combeat-page-gpt-chat .messages.is-empty {
    display: grid !important;
    grid-template-columns: minmax(0, min(1320px, calc(100% - 72px))) !important;
    justify-content: center !important;
    justify-items: center !important;
    align-content: center !important;
    align-items: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

html.combeat-page-gpt-chat .chat-empty-state {
    width: 100% !important;
    justify-self: center !important;
    align-self: center !important;
}

html.combeat-page-angle #resultBox {
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
}

html.combeat-page-angle #genBtn {
    height: 52px !important;
    min-height: 52px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

html.combeat-page-index.combeat-top-frame.combeat-dashboard-mode .dash-topbar {
    grid-template-columns: minmax(0, 1fr) 48px 48px !important;
    gap: 12px !important;
}

html.combeat-page-index.combeat-top-frame .dash-search,
html.combeat-page-index.combeat-top-frame .dash-head-tools {
    display: none !important;
}

html.combeat-page-index.combeat-top-frame .dash-message-btn {
    width: 48px !important;
    min-width: 48px !important;
    padding: 0 !important;
    justify-self: end !important;
    grid-column: 3 !important;
}

html.combeat-page-index.combeat-top-frame .dash-message-btn span {
    display: none !important;
}

html.combeat-page-index.combeat-top-frame .dash-topbar > .dash-icon-btn {
    justify-self: end !important;
    grid-column: 2 !important;
}

html.combeat-page-index.combeat-top-frame .dash-flag {
    justify-self: start !important;
    grid-column: 1 !important;
    gap: 10px !important;
    font-size: 16px !important;
    letter-spacing: .01em !important;
}

html.combeat-page-index.combeat-top-frame .dash-flag-icon {
    padding: 6px !important;
    background: rgba(255,255,255,.08) !important;
    overflow: hidden !important;
}

html.combeat-page-index.combeat-top-frame .dash-flag-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}

html.combeat-page-index.combeat-top-frame .dash-balance {
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: 126px !important;
    padding: 24px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 28px !important;
    color: #fff !important;
    background:
        radial-gradient(circle at 82% 78%, rgba(255, 72, 174, .56), transparent 36%),
        radial-gradient(circle at 34% 24%, rgba(78, 118, 255, .40), transparent 36%),
        linear-gradient(135deg, rgba(43,38,61,.98), rgba(113,43,99,.88)) !important;
    box-shadow: var(--cb-dash-shadow) !important;
    margin-top: 18px !important;
    align-items: center !important;
    grid-template-columns: 58px minmax(0, 1fr) 58px !important;
    gap: 0 !important;
    isolation: isolate !important;
    transition: transform .24s var(--cb-dash-ease), box-shadow .24s ease, border-color .24s ease !important;
}

html.combeat-page-index.combeat-top-frame .dash-balance::before {
    content: "" !important;
    position: absolute !important;
    inset: -55% !important;
    z-index: 0 !important;
    opacity: .78 !important;
    pointer-events: none !important;
    transform: rotate(-12deg) !important;
    background:
        linear-gradient(115deg, transparent 12%, rgba(255,255,255,.12) 28%, transparent 46%),
        repeating-radial-gradient(circle at 48% 42%, transparent 0 34px, rgba(255,255,255,.055) 35px 36px) !important;
}

html.combeat-page-index.combeat-top-frame .dash-balance:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(255,255,255,.22) !important;
    box-shadow: 0 34px 80px rgba(0,0,0,.35) !important;
}

html.combeat-page-index.combeat-top-frame .dash-balance > div {
    position: relative !important;
    z-index: 1 !important;
    min-height: 58px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    grid-column: 2 !important;
}

html.combeat-page-index.combeat-top-frame .dash-wallet {
    position: relative !important;
    z-index: 1 !important;
    width: 58px !important;
    height: 58px !important;
    border-radius: 22px !important;
    color: #fff !important;
    background: rgba(16,18,29,.33) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important;
}

html.combeat-page-index.combeat-top-frame .dash-wallet svg {
    width: 30px !important;
    height: 30px !important;
}

html.combeat-page-index.combeat-top-frame .dash-balance strong {
    margin-top: 0 !important;
    line-height: 1 !important;
    color: #fff !important;
    font-size: clamp(24px, 2vw, 34px) !important;
    text-shadow: 0 10px 28px rgba(0,0,0,.26) !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html.combeat-page-index.combeat-top-frame .dash-balance small {
    display: none;
    color: rgba(232, 255, 246, .86) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

html.combeat-page-index.combeat-top-frame .dash-balance:focus-visible {
    outline: 2px solid rgba(74, 166, 255, .62);
    outline-offset: 6px;
}

html.combeat-page-zimage .console-card > div:first-child {
    width: auto !important;
    margin: 10px 10px 14px !important;
    box-sizing: border-box !important;
}

html.combeat-page-zimage .console-card > .z-param-panel {
    margin-left: 10px !important;
    margin-right: 10px !important;
}

html.combeat-page-gpt-chat .messages.is-empty {
    grid-template-columns: minmax(0, min(1220px, calc(100% - 64px))) !important;
    justify-content: center !important;
    justify-items: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

html.combeat-page-gpt-chat .chat-empty-state {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: translateX(var(--chat-empty-axis-shift, 0px)) !important;
}

@media (max-width: 900px) {
    html.combeat-page-gpt-chat .messages.is-empty {
        grid-template-columns: minmax(0, calc(100% - 28px)) !important;
    }

    html.combeat-page-gpt-chat .chat-empty-state {
        transform: translateX(var(--chat-empty-axis-shift, 0px)) !important;
    }
}

@media (max-width: 980px) {
    html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) .container-box {
        padding: 24px 18px 28px !important;
        min-height: auto !important;
    }

    html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein) .container-box > main,
    html.combeat-page-angle .container-box > main.space-y-12 {
        height: auto !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: none !important;
    }

    html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein) #resultBox,
    html.combeat-page-angle #resultBox {
        min-height: 420px !important;
        max-height: none !important;
    }
}

/* Workbench polish: keep text upright and align empty work areas with the chat ready state. */
html:is(
    .combeat-page-index,
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-canvas,
    .combeat-page-inspiration,
    .combeat-page-login,
    .combeat-page-account,
    .combeat-page-admin,
    .combeat-page-api-settings
) body,
html:is(
    .combeat-page-index,
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-canvas,
    .combeat-page-inspiration,
    .combeat-page-login,
    .combeat-page-account,
    .combeat-page-admin,
    .combeat-page-api-settings
) body :is(h1, h2, h3, h4, h5, h6, p, span, label, button, a, input, textarea, select, option, small, strong, em, li, td, th, .italic) {
    font-style: normal !important;
}

html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) #resultBox::before {
    content: "" !important;
    width: 76px !important;
    height: 76px !important;
    border-radius: 26px !important;
    background:
        radial-gradient(circle at 24% 20%, rgba(255,255,255,.34), transparent 30%),
        linear-gradient(135deg, rgba(54,228,218,.78), rgba(22,139,255,.88)) !important;
    box-shadow: 0 18px 42px rgba(22,139,255,.26) !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) translateY(-46px) rotate(-2deg) !important;
    z-index: 0 !important;
    pointer-events: none !important;
    animation: cbIdleFloatCentered 3.4s ease-in-out infinite !important;
}

html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) #resultBox:has(#outputImg:not(.hidden))::before,
html.combeat-page-angle #resultBox:has(#textResult:not(.hidden))::before {
    opacity: 0 !important;
}

html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) #resultBox > :is(#placeholder, #emptyState) {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    text-align: center !important;
    transform: translateY(46px) !important;
    z-index: 1 !important;
    pointer-events: none !important;
    opacity: 1 !important;
}

html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) #resultBox > :is(#placeholder.hidden, #emptyState.hidden) {
    display: none !important;
}

html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) #resultBox > :is(#placeholder, #emptyState) > :is(i, svg) {
    display: none !important;
}

html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) #resultBox > :is(#placeholder, #emptyState) > p {
    margin: 0 !important;
    color: var(--cb-dash-muted) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .42em !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
}

@media (min-width: 981px) {
    html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein) .container-box > main {
        height: min(760px, calc(100vh - 150px)) !important;
        min-height: min(560px, calc(100vh - 170px)) !important;
        align-items: center !important;
        padding-top: clamp(8px, 2.2vh, 26px) !important;
    }

    html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein) .container-box > main > div:first-child {
        align-self: center !important;
        justify-content: center !important;
        padding-top: clamp(12px, 3.8vh, 46px) !important;
        padding-bottom: clamp(12px, 3.8vh, 46px) !important;
    }

    html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein) .container-box > main > div:last-child {
        align-self: center !important;
        height: min(720px, calc(100vh - 166px)) !important;
        min-height: min(540px, calc(100vh - 184px)) !important;
    }

    html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein) #resultBox {
        height: 100% !important;
        min-height: min(540px, calc(100vh - 184px)) !important;
        max-height: none !important;
    }

    html.combeat-page-angle .container-box > main.space-y-12 {
        height: min(780px, calc(100vh - 150px)) !important;
        min-height: min(620px, calc(100vh - 170px)) !important;
        align-content: center !important;
        padding-top: clamp(8px, 1.8vh, 22px) !important;
    }
}

/* Desktop one-screen app rule: page shell stays in one viewport; dense content scrolls inside panels. */
@media (min-width: 981px) {
    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-admin,
        .combeat-page-account,
        .combeat-page-api-settings,
        .combeat-page-payment
    ),
    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-admin,
        .combeat-page-account,
        .combeat-page-api-settings,
        .combeat-page-payment
    ) body {
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !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
    ) .studio-shell,
    html:is(.combeat-page-admin, .combeat-page-account, .combeat-page-api-settings, .combeat-page-payment) .shell,
    html.combeat-page-inspiration .shell {
        height: 100vh !important;
        min-height: 0 !important;
        max-height: 100vh !important;
        overflow: hidden !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
    ) :is(.studio-main, .studio-side, .dialogue-stage, .composer-wrap, .console-card, .tool-panel, .result-frame) {
        min-height: 0 !important;
        max-height: 100% !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
    ) :is(.result-list, .output-list, .history-panel, .messages, .canvas-list, .side-panel, .params-scroll, .tool-list) {
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-gutter: stable !important;
    }

    html.combeat-page-inspiration .shell {
        display: flex !important;
        flex-direction: column !important;
    }

    html.combeat-page-inspiration :is(.masonry, .gallery, .content, .items, .waterfall) {
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-gutter: stable !important;
    }

    html:is(.combeat-page-admin, .combeat-page-account, .combeat-page-api-settings, .combeat-page-payment) :is(.main, .content) {
        min-height: 0 !important;
        height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-gutter: stable !important;
    }
}

/* Strong mobile override for the /create shell inline styles. */
@media (max-width: 980px) {
    html.combeat-page-index.combeat-top-frame body .app-shell > aside.sidebar .brand .brand-text,
    html.combeat-page-index.combeat-top-frame body .app-shell > aside.sidebar nav#mainNav button.nav-item > span.label,
    html.combeat-page-index.combeat-top-frame body .app-shell > aside.sidebar .side-actions button.side-btn > span.label,
    html.combeat-page-index.combeat-top-frame body .app-shell > aside.sidebar .side-actions button.side-btn .account-label,
    html.combeat-page-index.combeat-top-frame body .app-shell > aside.sidebar .side-actions button.side-btn .account-level-mark {
        display: none !important;
    }

    html.combeat-page-index.combeat-top-frame body .app-shell > aside.sidebar :is(.nav-item, .side-btn, .side-home-btn) span {
        display: none !important;
    }

    html.combeat-page-index.combeat-top-frame body .app-shell > aside.sidebar .brand {
        flex: 0 0 48px !important;
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
    }

    html.combeat-page-index.combeat-top-frame body .app-shell > aside.sidebar nav#mainNav button.nav-item,
    html.combeat-page-index.combeat-top-frame body .app-shell > aside.sidebar .side-actions button.side-btn {
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        flex-basis: 48px !important;
    }
}

/* The creation workbenches use the sidebar as the page label, so the large page title is removed. */
html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) .container-box > header {
    display: none !important;
    visibility: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein, .combeat-page-angle) .container-box {
    padding-top: clamp(24px, 4.6vh, 48px) !important;
}

@media (min-width: 981px) {
    html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein) .container-box > main {
        height: min(790px, calc(100vh - 96px)) !important;
        min-height: min(560px, calc(100vh - 116px)) !important;
        padding-top: 0 !important;
    }

    html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein) .container-box > main > div:last-child {
        height: min(720px, calc(100vh - 116px)) !important;
        min-height: min(540px, calc(100vh - 136px)) !important;
    }

    html:is(.combeat-page-online, .combeat-page-enhance, .combeat-page-klein) #resultBox {
        min-height: min(540px, calc(100vh - 136px)) !important;
    }

    html.combeat-page-angle .container-box > main.space-y-12 {
        height: min(800px, calc(100vh - 96px)) !important;
        min-height: min(620px, calc(100vh - 116px)) !important;
        padding-top: 0 !important;
    }

    html.combeat-page-angle .container-box > main.space-y-12 > .grid:first-child > section:first-child #dropzone {
        flex: 1 1 auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        top: 0 !important;
        aspect-ratio: auto !important;
    }
}

/* Sidebar cleanup: logo behaves like a clean avatar, nav buttons have no backing plates. */
html.combeat-page-index.combeat-top-frame .sidebar .brand {
    width: 52px !important;
    height: 52px !important;
    flex: 0 0 52px !important;
    margin: 0 auto 34px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow:
        0 12px 26px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.92) !important;
    overflow: hidden !important;
    transform: none !important;
}

html.combeat-page-index.combeat-top-frame .sidebar .brand:hover {
    transform: translateY(-1px) !important;
    box-shadow:
        0 16px 32px rgba(22,139,255,.18),
        inset 0 1px 0 rgba(255,255,255,.96) !important;
}

html.combeat-page-index.combeat-top-frame .sidebar .brand-mark {
    width: 52px !important;
    height: 52px !important;
    flex: 0 0 52px !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

html.combeat-page-index.combeat-top-frame .sidebar .brand-mark img {
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: auto !important;
    transform: none !important;
    filter: drop-shadow(0 7px 13px rgba(22,139,255,.18)) !important;
}

html.combeat-page-index.combeat-top-frame .sidebar :is(.nav-item, .side-home-btn, .side-btn) {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    color: color-mix(in srgb, var(--cb-dash-text) 54%, transparent) !important;
    transition:
        transform .18s var(--cb-dash-ease),
        color .18s ease,
        opacity .18s ease,
        filter .18s ease !important;
}

html.combeat-page-index.combeat-top-frame .sidebar :is(.nav-item, .side-home-btn, .side-btn)::before,
html.combeat-page-index.combeat-top-frame .sidebar :is(.side-home-btn, .side-btn)::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

html.combeat-page-index.combeat-top-frame .sidebar :is(.nav-item, .side-home-btn, .side-btn):hover {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--cb-dash-text) !important;
    transform: translateY(-1px) !important;
}

html.combeat-page-index.combeat-top-frame .sidebar :is(.nav-item, .side-home-btn, .side-btn):active {
    transform: translateY(0) scale(.94) !important;
    color: var(--cb-dash-blue-2) !important;
}

html.combeat-page-index.combeat-top-frame .sidebar .nav-item.active {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #f7fbff !important;
    transform: none !important;
}

html.combeat-page-index.combeat-top-frame .sidebar .nav-item.active::before {
    content: none !important;
    display: none !important;
}

html.combeat-page-index.combeat-top-frame .sidebar .nav-item.active::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    right: -8px !important;
    left: auto !important;
    top: 50% !important;
    width: 3px !important;
    height: 34px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, var(--cb-dash-blue), var(--cb-dash-blue-2)) !important;
    box-shadow: 0 0 16px rgba(22,139,255,.42) !important;
    opacity: 1 !important;
    transform: translateY(-50%) !important;
}

html.combeat-page-index.combeat-top-frame .sidebar .nav-item.active :is(i, svg),
html.combeat-page-index.combeat-top-frame .sidebar .side-home-btn:hover :is(i, svg),
html.combeat-page-index.combeat-top-frame .sidebar .side-btn:hover :is(i, svg) {
    color: var(--cb-dash-blue) !important;
    stroke: currentColor !important;
    filter: drop-shadow(0 8px 16px rgba(22,139,255,.30)) !important;
    transform: translateY(-1px) scale(1.05) !important;
}

html.combeat-page-index.combeat-top-frame .sidebar .nav-item.active svg :is(path, rect, circle, polygon) {
    fill: color-mix(in srgb, var(--cb-dash-blue) 70%, transparent) !important;
    stroke: currentColor !important;
}

html.combeat-page-index.combeat-top-frame .sidebar .nav-item.active svg :is(line, polyline) {
    fill: none !important;
}

/* Sidebar home refinement: remove the top logo and use the logo as the home icon. */
html.combeat-page-index.combeat-top-frame .sidebar .brand {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    flex: 0 0 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

html.combeat-page-index.combeat-top-frame .sidebar .side-home-btn {
    margin: 0 0 10px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html.combeat-page-index.combeat-top-frame .sidebar .side-home-btn .home-logo-icon {
    width: 28px !important;
    height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 auto !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: grayscale(.08) opacity(.88) drop-shadow(0 6px 12px rgba(22,139,255,.18)) !important;
    transition: transform .18s var(--cb-dash-ease), filter .18s ease, opacity .18s ease !important;
}

html.combeat-page-index.combeat-top-frame .sidebar .side-home-btn:hover .home-logo-icon,
html.combeat-page-index.combeat-top-frame .sidebar .side-home-btn.active .home-logo-icon {
    opacity: 1 !important;
    filter: drop-shadow(0 8px 16px rgba(22,139,255,.32)) !important;
    transform: translateY(-1px) scale(1.06) !important;
}

html.combeat-page-index.combeat-top-frame .sidebar .side-home-btn.active {
    color: #f7fbff !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html.combeat-page-index.combeat-top-frame .sidebar .side-home-btn.active::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    right: -8px !important;
    left: auto !important;
    top: 50% !important;
    width: 3px !important;
    height: 34px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, var(--cb-dash-blue), var(--cb-dash-blue-2)) !important;
    box-shadow: 0 0 16px rgba(22,139,255,.42) !important;
    opacity: 1 !important;
    transform: translateY(-50%) !important;
}

html.combeat-page-zimage .console-kicker {
    display: none !important;
}

/* Chat composer: place the typed text and placeholder lower inside the input panel. */
html.combeat-page-gpt-chat textarea#messageInput {
    box-sizing: border-box !important;
    padding: 28px 24px 6px !important;
    min-height: 102px !important;
    line-height: 1.55 !important;
    text-indent: 0 !important;
    vertical-align: top !important;
}

/* Enhance page prompt: align placeholder/text to the marked position inside the compact input. */
html.combeat-page-enhance #msPromptInput {
    box-sizing: border-box !important;
    padding: 24px 24px 8px !important;
    line-height: 1.45 !important;
    text-indent: 0 !important;
    vertical-align: top !important;
}

/* Prompt containers: keep long text inside a unified scrollable glass field. */
html:is(.combeat-page-online, .combeat-page-klein) #promptInput,
html.combeat-page-enhance #msPromptInput,
html.combeat-page-angle #promptInput,
html.combeat-page-zimage #prompt {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-height: 126px !important;
    height: 126px !important;
    max-height: 126px !important;
    padding: 24px 28px !important;
    border: 1px solid rgba(171, 185, 220, .18) !important;
    border-radius: 28px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.035)),
        rgba(45, 50, 73, .72) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 18px 42px rgba(0,0,0,.12) !important;
    color: var(--cb-dash-text, #eef5ff) !important;
    font-size: 15px !important;
    font-weight: 760 !important;
    line-height: 1.62 !important;
    resize: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    scrollbar-gutter: stable !important;
}

html.combeat-page-zimage #prompt {
    min-height: 146px !important;
    height: 146px !important;
    max-height: 146px !important;
    font-size: clamp(16px, 1.34vw, 22px) !important;
    line-height: 1.55 !important;
}

html.combeat-page-angle #promptInput {
    flex: 0 0 126px !important;
}

html:is(.combeat-page-online, .combeat-page-klein) #promptInput::placeholder,
html.combeat-page-enhance #msPromptInput::placeholder,
html.combeat-page-angle #promptInput::placeholder,
html.combeat-page-zimage #prompt::placeholder {
    color: color-mix(in srgb, var(--cb-dash-muted, #9ba7bd) 76%, transparent) !important;
}

html:not(.studio-theme-dark):is(.combeat-page-online, .combeat-page-klein) #promptInput,
html:not(.studio-theme-dark).combeat-page-enhance #msPromptInput,
html:not(.studio-theme-dark).combeat-page-angle #promptInput,
html:not(.studio-theme-dark).combeat-page-zimage #prompt {
    background:
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(244,248,255,.74)),
        rgba(255,255,255,.78) !important;
    color: #152032 !important;
    border-color: rgba(122, 142, 182, .18) !important;
}

/* Chat alignment: messages and empty state share the same center line as the composer. */
html.combeat-page-gpt-chat {
    --chat-workbench-width: min(1320px, calc(100% - 72px));
}

html.combeat-page-gpt-chat .topbar-inner,
html.combeat-page-gpt-chat .messages,
html.combeat-page-gpt-chat .composer {
    width: var(--chat-workbench-width) !important;
    max-width: var(--chat-workbench-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

html.combeat-page-gpt-chat .messages {
    flex: 1 1 auto !important;
    padding: 34px 0 286px !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
}

html.combeat-page-gpt-chat .bubble-row {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html.combeat-page-gpt-chat .bubble {
    max-width: min(780px, 72%) !important;
}

html.combeat-page-gpt-chat .messages.is-empty {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 72px 0 286px !important;
}

html.combeat-page-gpt-chat .chat-empty-state {
    width: 100% !important;
    transform: none !important;
    margin: 0 auto !important;
}

@media (max-width: 900px) {
    html.combeat-page-gpt-chat {
        --chat-workbench-width: calc(100% - 36px);
    }

    html.combeat-page-gpt-chat .messages {
        padding-bottom: 372px !important;
    }

    html.combeat-page-gpt-chat .messages.is-empty {
        padding-bottom: 372px !important;
    }

html.combeat-page-gpt-chat .bubble {
    max-width: 88% !important;
    }
}

/* Inspiration banner: the ad artwork must cover the whole slot, without the old padded contain mode. */
html.combeat-page-inspiration .ad-wrap {
    overflow: hidden !important;
}

html.combeat-page-inspiration .ad-slide.has-image {
    background-size: cover !important;
    background-position: center !important;
}

html.combeat-page-inspiration .ad-slide img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 100% !important;
    min-height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    opacity: 1 !important;
}

html.combeat-page-inspiration .ad-fallback::before {
    background-image: url("/static/logo.svg?v=20260604-mobile-nav-glow-fix") !important;
}

/* Dashboard creation status: live per-account data instead of a static chart. */
html.combeat-page-index.combeat-top-frame .dash-chart-body {
    overflow: hidden !important;
}

html.combeat-page-index.combeat-top-frame .dash-line,
html.combeat-page-index.combeat-top-frame .dash-area,
html.combeat-page-index.combeat-top-frame .dash-line-chart circle {
    transition: d .45s ease, cx .45s ease, cy .45s ease, opacity .25s ease !important;
}

html.combeat-page-index.combeat-top-frame .dash-chart-empty {
    position: absolute;
    inset: 0 0 0 48px;
    display: grid;
    place-items: center;
    color: rgba(231, 238, 255, .64);
    font-size: 13px;
    font-weight: 800;
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .22s ease, transform .22s ease;
}

html.combeat-page-index.combeat-top-frame .dash-chart-empty.show {
    opacity: 1;
    transform: translateY(0);
}

html.combeat-page-index.combeat-top-frame .dash-chart-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    padding-left: 48px;
}

html.combeat-page-index.combeat-top-frame .dash-chart-stats span {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    border-radius: 10px;
    padding: 0 10px;
    color: rgba(245, 248, 255, .84);
    background: rgba(255,255,255,.075);
    border: 1px solid rgba(255,255,255,.08);
    font-size: 12px;
    font-weight: 900;
}

html.combeat-page-index.combeat-top-frame .dash-chart-stats span:first-child {
    color: #ffffff;
    background: linear-gradient(135deg, rgba(24,140,255,.28), rgba(237,43,167,.2));
}

/* Chat answers: let the message area scroll, while each bubble expands to full content height. */
html.combeat-page-gpt-chat {
    --chat-composer-height: 260px;
    --chat-composer-gap: 52px;
}

html.combeat-page-gpt-chat .messages {
    padding-bottom: calc(var(--chat-composer-height, 260px) + var(--chat-composer-gap, 52px)) !important;
    scroll-padding-bottom: calc(var(--chat-composer-height, 260px) + var(--chat-composer-gap, 52px)) !important;
}

html.combeat-page-gpt-chat .messages.is-empty {
    padding-bottom: calc(var(--chat-composer-height, 260px) + var(--chat-composer-gap, 52px)) !important;
}

html.combeat-page-gpt-chat .bubble.assistant {
    max-height: none !important;
    overflow: visible !important;
    scrollbar-gutter: auto !important;
    overscroll-behavior: auto !important;
}

html.combeat-page-gpt-chat .bubble.assistant .bubble-text {
    display: block !important;
    min-width: 0 !important;
}

html.combeat-page-gpt-chat .bubble.assistant::-webkit-scrollbar {
    width: 6px;
}

html.combeat-page-gpt-chat .bubble.assistant::-webkit-scrollbar-track {
    background: transparent;
}

html.combeat-page-gpt-chat .bubble.assistant::-webkit-scrollbar-thumb {
    border: 1px solid transparent;
    border-radius: 999px;
    background: rgba(196, 210, 242, .22);
    background-clip: padding-box;
}

html.combeat-page-gpt-chat .bubble.assistant:hover::-webkit-scrollbar-thumb {
    background: rgba(196, 210, 242, .38);
    background-clip: padding-box;
}

/* Token pricing labels: keep the chat send button readable when it shows input/output 1M rates. */
html.combeat-page-gpt-chat .send-btn {
    min-width: 220px !important;
    max-width: min(520px, 42vw) !important;
}

html.combeat-page-gpt-chat .send-btn .send-btn-text {
    max-width: min(450px, 36vw) !important;
}

@media (max-width: 900px) {
    html.combeat-page-gpt-chat {
        --chat-composer-gap: 34px;
    }

    html.combeat-page-gpt-chat .bubble.assistant {
        max-height: none !important;
        overflow: visible !important;
    }

    html.combeat-page-gpt-chat .send-btn {
        width: 100% !important;
        max-width: 100% !important;
    }

html.combeat-page-gpt-chat .send-btn .send-btn-text {
        max-width: calc(100vw - 120px) !important;
    }
}

/* Sidebar account chip: keep the level mark slightly higher and show the user's remaining balance below it. */
html.combeat-page-index.combeat-top-frame .sidebar .account-btn.is-user,
html.combeat-page-index.combeat-top-frame .sidebar .account-btn.is-admin {
    height: 64px !important;
    flex-basis: 64px !important;
    transform: translateY(-8px) !important;
    gap: 4px !important;
}

html.combeat-page-index.combeat-top-frame .sidebar .account-btn.is-user:hover,
html.combeat-page-index.combeat-top-frame .sidebar .account-btn.is-admin:hover {
    transform: translateY(-9px) !important;
}

html.combeat-page-index.combeat-top-frame .sidebar .account-btn.is-user .account-label,
html.combeat-page-index.combeat-top-frame .sidebar .account-btn.is-admin .account-label,
html.combeat-page-index.combeat-top-frame .sidebar .account-btn.is-user .account-row,
html.combeat-page-index.combeat-top-frame .sidebar .account-btn.is-admin .account-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    overflow: visible !important;
}

html.combeat-page-index.combeat-top-frame .sidebar .account-btn.is-user .account-name,
html.combeat-page-index.combeat-top-frame .sidebar .account-btn.is-admin .account-name {
    display: none !important;
}

html.combeat-page-index.combeat-top-frame .sidebar .account-btn.is-user .account-credits,
html.combeat-page-index.combeat-top-frame .sidebar .account-btn.is-admin .account-credits {
    display: block !important;
    max-width: 78px !important;
    color: color-mix(in srgb, var(--cb-dash-text) 78%, transparent) !important;
    font-size: 9px !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* Global theme and motion polish: primary actions stay consistent across tool pages. */
:root {
    --cb-action-gradient: linear-gradient(135deg, #168bff 0%, #28c7c2 100%);
    --cb-action-gradient-warm: linear-gradient(135deg, #111827 0%, #243447 100%);
    --cb-action-shadow: 0 10px 22px rgba(22, 140, 255, .20), 0 0 0 1px rgba(255,255,255,.14) inset;
    --cb-action-text: #fff;
    --cb-card-tint: rgba(255,255,255,.075);
    --cb-card-tint-hover: rgba(255,255,255,.115);
}

html:not(.studio-theme-dark) {
    --cb-action-shadow: 0 10px 22px rgba(22, 140, 255, .16), 0 0 0 1px rgba(255,255,255,.64) inset;
    --cb-action-text: #ffffff;
    --cb-card-tint: rgba(255,255,255,.74);
    --cb-card-tint-hover: rgba(255,255,255,.92);
}

html:is(
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-canvas,
    .combeat-page-admin,
    .combeat-page-account,
    .combeat-page-payment,
    .combeat-page-inspiration,
    .combeat-page-ai-studio,
    .combeat-page-login,
    .combeat-page-api-settings
) :is(
    .generate-btn,
    #generateBtn,
    .send-btn,
    .gen-btn,
    .btn-render,
    .glass-btn.primary,
    .primary-btn,
    button.primary,
    .btn.primary,
    .save-btn,
    .api-page-save-btn,
    .publish-inspiration-btn,
    .open-btn,
    #payBtn,
    #customPayBtn,
    .comfy-run,
    .dash-primary-action,
    .dash-secondary-action,
    .dash-show-all,
    .dash-panel-head button,
    .action-btn.save-btn,
    .action-btn.primary-btn,
    .action-btn.primary,
    .primary-btn,
    button.primary,
    .btn.primary,
    .tool-btn.primary,
    .run-btn,
    .submit-btn,
    .create-btn,
    .confirm-btn,
    [data-action="save"],
    [data-action="generate"]
) {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    border: 0 !important;
    color: var(--cb-action-text) !important;
    background: var(--cb-action-gradient) !important;
    box-shadow: var(--cb-action-shadow) !important;
    transform: translateZ(0);
    transition: transform .18s var(--cb-ease), box-shadow .18s ease, filter .18s ease, opacity .18s ease !important;
}

html:is(
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-canvas,
    .combeat-page-admin,
    .combeat-page-account,
    .combeat-page-payment,
    .combeat-page-inspiration,
    .combeat-page-ai-studio,
    .combeat-page-login,
    .combeat-page-api-settings
) :is(
    .generate-btn,
    #generateBtn,
    .send-btn,
    .gen-btn,
    .btn-render,
    .glass-btn.primary,
    .primary-btn,
    button.primary,
    .btn.primary,
    .save-btn,
    .api-page-save-btn,
    .publish-inspiration-btn,
    .open-btn,
    #payBtn,
    #customPayBtn,
    .comfy-run,
    .dash-primary-action,
    .dash-secondary-action,
    .dash-show-all,
    .dash-panel-head button,
    .action-btn.save-btn,
    .action-btn.primary-btn,
    .action-btn.primary,
    .primary-btn,
    button.primary,
    .btn.primary,
    .tool-btn.primary,
    .run-btn,
    .submit-btn,
    .create-btn,
    .confirm-btn,
    [data-action="save"],
    [data-action="generate"]
)::before {
    content: none !important;
    pointer-events: none !important;
}

html:is(
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-canvas,
    .combeat-page-admin,
    .combeat-page-account,
    .combeat-page-payment,
    .combeat-page-inspiration,
    .combeat-page-ai-studio,
    .combeat-page-login,
    .combeat-page-api-settings
) :is(
    .generate-btn,
    #generateBtn,
    .send-btn,
    .gen-btn,
    .btn-render,
    .glass-btn.primary,
    .primary-btn,
    button.primary,
    .btn.primary,
    .save-btn,
    .api-page-save-btn,
    .publish-inspiration-btn,
    .open-btn,
    #payBtn,
    #customPayBtn,
    .comfy-run,
    .dash-primary-action,
    .dash-secondary-action,
    .dash-show-all,
    .dash-panel-head button,
    .action-btn.save-btn,
    .action-btn.primary-btn,
    .action-btn.primary,
    .primary-btn,
    button.primary,
    .btn.primary,
    .tool-btn.primary,
    .run-btn,
    .submit-btn,
    .create-btn,
    .confirm-btn,
    [data-action="save"],
    [data-action="generate"]
):hover {
    transform: translateY(-1px) translateZ(0) !important;
    filter: brightness(1.04) !important;
    box-shadow: 0 14px 28px rgba(22, 140, 255, .22), 0 0 0 1px rgba(255,255,255,.18) inset !important;
}

html:is(
    .combeat-page-online,
    .combeat-page-zimage,
    .combeat-page-enhance,
    .combeat-page-klein,
    .combeat-page-angle,
    .combeat-page-gpt-chat,
    .combeat-page-canvas,
    .combeat-page-admin,
    .combeat-page-account,
    .combeat-page-payment,
    .combeat-page-inspiration,
    .combeat-page-ai-studio,
    .combeat-page-login,
    .combeat-page-api-settings
) :is(
    .generate-btn,
    #generateBtn,
    .send-btn,
    .gen-btn,
    .btn-render,
    .glass-btn.primary,
    .primary-btn,
    button.primary,
    .btn.primary,
    .save-btn,
    .api-page-save-btn,
    .publish-inspiration-btn,
    .open-btn,
    #payBtn,
    #customPayBtn,
    .comfy-run,
    .dash-primary-action,
    .dash-secondary-action,
    .dash-show-all,
    .dash-panel-head button,
    .action-btn.save-btn,
    .action-btn.primary-btn,
    .action-btn.primary,
    .primary-btn,
    button.primary,
    .btn.primary,
    .tool-btn.primary,
    .run-btn,
    .submit-btn,
    .create-btn,
    .confirm-btn,
    [data-action="save"],
    [data-action="generate"]
):active {
    transform: translateY(0) scale(.985) !important;
}

html:is(.combeat-page-ai-studio) #generateBtn {
    animation: none !important;
}

html .cb-action-clicked {
    animation: cbActionClicked .72s cubic-bezier(.22,1,.36,1) both !important;
}

html:is(.combeat-page-payment) .plan-svip.selected .open-btn {
    background: #111827 !important;
}

html:is(.combeat-page-payment) .plan-vip.selected .open-btn {
    background: #111827 !important;
    color: #fff !important;
}

html:is(.combeat-page-payment) .plan-normal.selected .open-btn {
    background: #198cff !important;
}

html:is(.combeat-page-admin, .combeat-page-account) :is(.panel, .card, .section, .tab-panel, .table-wrap, .stat-card, .record-card, .admin-card, .tool-card, .form-card) {
    border-color: color-mix(in srgb, var(--cb-line) 82%, transparent) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(22,140,255,.08), transparent 34%),
        color-mix(in srgb, var(--cb-panel) 88%, transparent) !important;
    box-shadow: 0 16px 46px rgba(0,0,0,.18) !important;
}

html:not(.studio-theme-dark):is(.combeat-page-admin, .combeat-page-account) :is(.panel, .card, .section, .tab-panel, .table-wrap, .stat-card, .record-card, .admin-card, .tool-card, .form-card) {
    background:
        radial-gradient(circle at 12% 0%, rgba(22,140,255,.10), transparent 34%),
        rgba(255,255,255,.84) !important;
    box-shadow: 0 16px 46px rgba(31,76,122,.12) !important;
}

html:is(.combeat-page-admin, .combeat-page-account) :is(.nav-btn, .tab-btn, .menu-btn, .sidebar-btn) {
    border-radius: 13px !important;
    transition: transform .18s var(--cb-ease), background .18s ease, color .18s ease, border-color .18s ease !important;
}

html:is(.combeat-page-admin, .combeat-page-account) :is(.nav-btn, .tab-btn, .menu-btn, .sidebar-btn):hover {
    transform: translateY(-1px) !important;
}

html:is(.combeat-page-admin, .combeat-page-account) :is(.nav-btn.active, .tab-btn.active, .menu-btn.active, .sidebar-btn.active) {
    color: #fff !important;
    background: #168bff !important;
    box-shadow: 0 10px 22px rgba(22,140,255,.18) !important;
}

html.combeat-page-index.combeat-top-frame body .sidebar .brand {
    display: flex !important;
    width: 100% !important;
    height: 58px !important;
    flex: 0 0 58px !important;
    margin: 0 0 2px !important;
    padding: 0 10px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    pointer-events: auto !important;
    transform: none !important;
}

html.combeat-page-index.combeat-top-frame body .sidebar .brand:hover {
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

html.combeat-page-index.combeat-top-frame body .sidebar .brand-mark {
    display: grid !important;
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    place-items: center start !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

html.combeat-page-index.combeat-top-frame body .sidebar .brand-mark img {
    display: block !important;
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    object-fit: contain !important;
    object-position: left center !important;
    margin: 0 !important;
    padding: 0 !important;
    filter: none !important;
}

html.combeat-page-index.combeat-top-frame body .sidebar .brand-text {
    display: grid !important;
    gap: 1px !important;
    min-width: 0 !important;
    line-height: 1.12 !important;
}

html.combeat-page-index.combeat-top-frame body .sidebar .brand-name {
    color: var(--text, var(--cb-dash-text, #f4f6f8)) !important;
    font-size: 16px !important;
    line-height: 1.12 !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
}

html.combeat-page-index.combeat-top-frame body .sidebar .brand-sub {
    margin: 0 !important;
    color: var(--muted, var(--cb-dash-muted, #98a2b3)) !important;
    font-size: 13px !important;
    line-height: 1.12 !important;
    font-weight: 820 !important;
    letter-spacing: 0 !important;
}

html.combeat-page-index.combeat-top-frame body .sidebar :is(.nav-item, .side-btn, .side-home-btn) {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

html.combeat-page-index.combeat-top-frame body .sidebar :is(.nav-item, .side-btn, .side-home-btn):hover {
    background: rgba(255,255,255,.045) !important;
}

html:not(.studio-theme-dark).combeat-page-index.combeat-top-frame body .sidebar :is(.nav-item, .side-btn, .side-home-btn):hover {
    background: rgba(15,23,42,.045) !important;
}

html.combeat-page-index.combeat-top-frame body :is(.dash-primary-action, .dash-secondary-action, .dash-show-all, .dash-panel-head button) {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    border: 0 !important;
    color: #fff !important;
    background: var(--cb-action-gradient) !important;
    box-shadow: var(--cb-action-shadow) !important;
}

html.combeat-page-index.combeat-top-frame body :is(.dash-primary-action, .dash-secondary-action, .dash-show-all, .dash-panel-head button)::before {
    content: none !important;
    pointer-events: none !important;
}

html.combeat-page-index.combeat-top-frame body :is(.dash-primary-action, .dash-secondary-action, .dash-show-all, .dash-panel-head button):hover {
    transform: translateY(-1px) translateZ(0) !important;
    filter: brightness(1.04) !important;
}

html:is(.combeat-page-admin, .combeat-page-account) body {
    min-height: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

html:is(.combeat-page-admin, .combeat-page-account) .shell {
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    overflow: visible !important;
}

html:is(.combeat-page-admin, .combeat-page-account) .main,
html:is(.combeat-page-admin, .combeat-page-account) .content {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    scrollbar-gutter: stable !important;
}

html:is(.combeat-page-admin, .combeat-page-account) .panel {
    min-height: 0 !important;
    overflow: visible !important;
}

html:is(.combeat-page-admin, .combeat-page-account) :is(.table-wrap, .record-list, .records-list, .log-list, .invite-list, .payment-list) {
    max-height: none !important;
    max-width: 100% !important;
    overflow-y: visible !important;
    overflow-x: auto !important;
    scrollbar-gutter: stable !important;
}

html:is(.combeat-page-admin, .combeat-page-account) .sidebar {
    border-right-color: transparent !important;
    box-shadow: none !important;
}

html:not(.studio-theme-dark):is(.combeat-page-admin, .combeat-page-account) body {
    color: #0f172a !important;
}

html:not(.studio-theme-dark):is(.combeat-page-admin, .combeat-page-account) :is(.card, .panel, .table-wrap, .pay-config-card, .route-step, .record-note, .notice-card, .notice-media, .site-mini, .footerbar) {
    color: #0f172a !important;
    background-color: rgba(255,255,255,.94) !important;
    border-color: rgba(15,23,42,.12) !important;
}

html:not(.studio-theme-dark):is(.combeat-page-admin, .combeat-page-account) :is(h1, h2, h3, h4, .top-title h1, .section-head h2, .card-title, .metric .value, td, summary, label, .label) {
    color: #0f172a !important;
}

html:not(.studio-theme-dark):is(.combeat-page-admin, .combeat-page-account) :is(.muted, .notice, .hint, .field .hint, .pay-rule-note, .error-detail, .error-meta, .record-note, .notice-body p, .section-head p, .metric .hint, .top-title p) {
    color: #475569 !important;
}

html:not(.studio-theme-dark):is(.combeat-page-admin, .combeat-page-account) :is(th, .pill, .record-tab:not(.active)) {
    color: #334155 !important;
}

html:not(.studio-theme-dark):is(.combeat-page-admin, .combeat-page-account) th {
    background: #f1f5f9 !important;
}

html:not(.studio-theme-dark):is(.combeat-page-admin, .combeat-page-account) :is(.nav-btn, .tab-btn, .menu-btn, .sidebar-btn) {
    color: #475467 !important;
}

html:not(.studio-theme-dark):is(.combeat-page-admin, .combeat-page-account) :is(.nav-btn.active, .tab-btn.active, .menu-btn.active, .sidebar-btn.active) {
    color: #fff !important;
}

html:is(.combeat-page-admin, .combeat-page-account) :is(input, textarea, select) {
    color: var(--text, #f4f6f8) !important;
}

html:not(.studio-theme-dark):is(.combeat-page-admin, .combeat-page-account) :is(input, textarea, select) {
    color: #111827 !important;
}

html:is(.combeat-page-admin, .combeat-page-account, .combeat-page-api-settings) body {
    min-height: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

html:is(.combeat-page-admin, .combeat-page-account) .shell {
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
}

html:is(.combeat-page-admin, .combeat-page-account) .sidebar {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

html:is(.combeat-page-admin, .combeat-page-account) :is(.main, .content, .panel) {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
}

html:is(.combeat-page-admin, .combeat-page-account) .content {
    padding-left: clamp(22px, 2.4vw, 46px) !important;
    padding-right: clamp(22px, 2.4vw, 46px) !important;
    padding-bottom: 42px !important;
}

html:is(.combeat-page-admin, .combeat-page-account) :is(.table-wrap, .record-list, .records-list, .log-list, .invite-list, .payment-list) {
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: auto !important;
}

html.combeat-page-admin .api-frame {
    width: 100% !important;
    max-width: none !important;
    min-height: 980px !important;
    height: 980px;
    overflow: hidden !important;
}

html.combeat-page-api-settings.embedded-api-settings,
html.combeat-page-api-settings.embedded-api-settings body {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

html.combeat-page-api-settings.embedded-api-settings .page,
html.combeat-page-api-settings.embedded-api-settings .wrap,
html.combeat-page-api-settings.embedded-api-settings .layout,
html.combeat-page-api-settings.embedded-api-settings .content {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

@media (min-width: 981px) {
    html:is(.combeat-page-admin, .combeat-page-account) .shell {
        width: 100% !important;
        max-width: none !important;
    }

    html.combeat-page-api-settings.embedded-api-settings .shell {
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: visible !important;
    }
}

@media (max-width: 980px) {
    html:is(.combeat-page-admin, .combeat-page-account) .shell {
        display: flex !important;
        flex-direction: column !important;
    }

    html:is(.combeat-page-admin, .combeat-page-account) .sidebar {
        position: sticky !important;
        top: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        z-index: 20 !important;
    }
}

/* Admin/account usability repair: keep controls visible, let long panels scroll naturally, and use the wide work area. */
html:is(.combeat-page-admin, .combeat-page-account) {
    min-height: 100% !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

html:is(.combeat-page-admin, .combeat-page-account) body {
    min-height: 100vh !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

html:is(.combeat-page-admin, .combeat-page-account) .shell {
    display: grid !important;
    grid-template-columns: clamp(260px, 17vw, 320px) minmax(0, 1fr) !important;
    align-items: start !important;
    min-height: 100vh !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

html:is(.combeat-page-admin, .combeat-page-account) .sidebar {
    position: sticky !important;
    top: 0 !important;
    align-self: start !important;
    width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

html:is(.combeat-page-admin, .combeat-page-account) .nav-btn {
    min-width: 0 !important;
    justify-content: flex-start !important;
}

html:is(.combeat-page-admin, .combeat-page-account) .nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

html:is(.combeat-page-admin, .combeat-page-account) .nav-group,
html:is(.combeat-page-admin, .combeat-page-account) .nav-group-items {
    display: grid !important;
    gap: 7px !important;
}

html:is(.combeat-page-admin, .combeat-page-account) .nav-group-title {
    display: block !important;
    margin-top: 4px !important;
}

html:is(.combeat-page-admin, .combeat-page-account) .nav-group .nav-btn,
html:is(.combeat-page-admin, .combeat-page-account) .nav-group:not(.active) .nav-group-items .nav-btn,
html:is(.combeat-page-admin, .combeat-page-account) .nav-group:not(.active) .nav-group-items .nav-btn:not(:first-child) {
    display: flex !important;
}

html:is(.combeat-page-admin, .combeat-page-account) .main {
    min-width: 0 !important;
    min-height: 100vh !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

html:is(.combeat-page-admin, .combeat-page-account) .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 12 !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}

html:is(.combeat-page-admin, .combeat-page-account) .content {
    width: min(100%, 1680px) !important;
    max-width: 1680px !important;
    margin: 0 auto !important;
    padding-left: clamp(24px, 3.2vw, 72px) !important;
    padding-right: clamp(24px, 3.2vw, 72px) !important;
    padding-bottom: 72px !important;
    overflow: visible !important;
}

html:is(.combeat-page-admin, .combeat-page-account) .panel,
html:is(.combeat-page-admin, .combeat-page-account) .panel.active,
html:is(.combeat-page-admin, .combeat-page-account) .card {
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
}

html:is(.combeat-page-admin, .combeat-page-account) .grid,
html:is(.combeat-page-admin, .combeat-page-account) .split,
html:is(.combeat-page-admin, .combeat-page-account) .two-col,
html:is(.combeat-page-admin, .combeat-page-account) .pay-admin-grid,
html:is(.combeat-page-admin, .combeat-page-account) .pay-config-grid,
html:is(.combeat-page-admin, .combeat-page-account) .field-grid,
html:is(.combeat-page-admin, .combeat-page-account) .site-mini {
    max-width: none !important;
}

html:is(.combeat-page-admin, .combeat-page-account) :is(.table-wrap, .record-list, .records-list, .log-list, .invite-list, .payment-list) {
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: auto !important;
}

html.combeat-page-admin .api-frame {
    width: 100% !important;
    min-height: 1200px !important;
    height: 1200px;
    max-height: none !important;
    overflow: visible !important;
}

html.combeat-page-api-settings.embedded-api-settings,
html.combeat-page-api-settings.embedded-api-settings body,
html.combeat-page-api-settings.embedded-api-settings .page,
html.combeat-page-api-settings.embedded-api-settings .wrap,
html.combeat-page-api-settings.embedded-api-settings .layout,
html.combeat-page-api-settings.embedded-api-settings .content,
html.combeat-page-api-settings.embedded-api-settings .block {
    max-height: none !important;
    overflow: visible !important;
}

html.combeat-page-api-settings.embedded-api-settings body.embedded .layout {
    grid-template-columns: minmax(250px, .22fr) minmax(0, 1fr) !important;
    gap: clamp(18px, 2vw, 34px) !important;
}

@media (min-width: 1500px) {
    html:is(.combeat-page-admin, .combeat-page-account) .cards.compact {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    html:is(.combeat-page-admin, .combeat-page-account) .cards {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    html:is(.combeat-page-admin, .combeat-page-account) .two-col,
    html:is(.combeat-page-admin, .combeat-page-account) .split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    }
}

@media (max-width: 980px) {
    html:is(.combeat-page-admin, .combeat-page-account) .shell {
        display: flex !important;
        flex-direction: column !important;
    }

    html:is(.combeat-page-admin, .combeat-page-account) .sidebar {
        position: sticky !important;
        top: 0 !important;
        height: auto !important;
        max-height: 42vh !important;
        overflow-y: auto !important;
        padding: 12px !important;
    }

    html:is(.combeat-page-admin, .combeat-page-account) .topbar {
        position: relative !important;
    }

    html:is(.combeat-page-admin, .combeat-page-account) .content {
        width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    html.combeat-page-api-settings.embedded-api-settings body.embedded .layout {
        grid-template-columns: 1fr !important;
    }

    html.combeat-page-admin .api-frame {
        min-height: 1500px !important;
    }
}

.combeat-api-guard {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--bg, #08090c);
    color: var(--text, #f4f6f8);
}

.combeat-api-guard-card {
    width: min(460px, 100%);
    border: 1px solid color-mix(in srgb, var(--line, rgba(255,255,255,.12)) 80%, transparent);
    border-radius: 24px;
    background: color-mix(in srgb, var(--panel, #111216) 90%, transparent);
    box-shadow: 0 24px 72px rgba(0,0,0,.22);
    padding: 24px;
    text-align: left;
}

.combeat-api-guard-card h1 {
    margin: 0 0 8px;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 950;
}

.combeat-api-guard-card p {
    margin: 0 0 18px;
    color: var(--muted, #98a2b3);
    font-size: 14px;
    line-height: 1.7;
}

/* Final top-frame layout guard: iframe pages must always fill the right work area. */
html.combeat-page-index.combeat-top-frame,
html.combeat-page-index.combeat-top-frame body {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
}

html.combeat-page-index.combeat-top-frame body .app-shell {
    display: grid !important;
    grid-template-columns: 268px minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    align-items: stretch !important;
    overflow: hidden !important;
}

html.combeat-page-index.combeat-top-frame body .sidebar {
    grid-column: 1 !important;
    grid-row: 1 !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
}

html.combeat-page-index.combeat-top-frame body .stage {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100vh !important;
    min-height: 0 !important;
    max-height: 100vh !important;
    align-self: stretch !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

html.combeat-page-index.combeat-top-frame body .top-quick-action {
    position: fixed !important;
    top: 18px !important;
    z-index: 35 !important;
    isolation: isolate !important;
    overflow: hidden !important;
    border: 0 !important;
    color: #fff !important;
    background: var(--cb-action-gradient) !important;
    box-shadow: var(--cb-action-shadow) !important;
}

html.combeat-page-index.combeat-top-frame body .top-quick-action::before {
    content: none !important;
    pointer-events: none !important;
}

html.combeat-page-index.combeat-top-frame body .top-quick-action:hover {
    transform: translateY(-1px) translateZ(0) !important;
    filter: brightness(1.04) !important;
}

html.combeat-page-index.combeat-top-frame body #topNewChatBtn {
    left: max(288px, calc(268px + ((100vw - 268px - 1280px) / 2))) !important;
}

html.combeat-page-index.combeat-top-frame body #topClearBtn {
    right: max(24px, calc((100vw - 268px - 1280px) / 2)) !important;
}

html.combeat-page-index.combeat-top-frame body .dashboard-view,
html.combeat-page-index.combeat-top-frame body .stage > iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
}

html.combeat-page-index.combeat-top-frame body .stage > iframe {
    display: block !important;
    border: 0 !important;
    opacity: 0 !important;
    transform: none !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

html.combeat-page-index.combeat-top-frame body .stage > iframe.active {
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 3 !important;
}

html.combeat-page-index.combeat-top-frame body .dashboard-view {
    z-index: 2 !important;
}

html.combeat-page-index.combeat-top-frame body .dashboard-view:not(.active) {
    display: none !important;
    pointer-events: none !important;
}

@keyframes cbActionShine {
    0% { transform: skewX(-18deg) translateX(-40%); opacity: 0; }
    18% { opacity: .88; }
    54%, 100% { transform: skewX(-18deg) translateX(355%); opacity: 0; }
}

@keyframes cbActionBreathe {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.03); }
}

@keyframes cbActionClicked {
    0% {
        transform: translateY(0) scale(.985);
        filter: brightness(1.04);
        box-shadow: 0 0 0 rgba(88,230,255,0), var(--cb-action-shadow);
    }
    35% {
        transform: translateY(-2px) scale(1.018);
        filter: brightness(1.08);
        box-shadow: 0 18px 42px rgba(22,140,255,.30), 0 0 0 5px rgba(88,230,255,.10);
    }
    100% {
        transform: translateY(0) scale(1);
        filter: brightness(1.02);
    }
}

@media (prefers-reduced-motion: reduce) {
    html :is(.generate-btn, #generateBtn, .send-btn, .gen-btn, .btn-render, .primary-btn, button.primary, .btn.primary, .open-btn)::before {
        animation: none !important;
        opacity: 0 !important;
    }
}

html :is(.brand img, .brand-mark img, .studio-logo img, .dash-logo-orb img, .dash-flag-icon img, #brandLogo img, img#brandLogo, .sidebar-logo-img) {
    border-radius: 8px !important;
    object-fit: contain !important;
    background: #fff !important;
}

/* Global interaction performance polish: keep clicks responsive on image-heavy pages. */
html :is(button, a, [role="button"], .nav-item, .side-btn, .dash-feature-card, .dash-mini-card, .copy-btn, .replicate-btn, .tool-btn, .btn, .glass-btn, .gen-btn, .primary-btn, .save-btn) {
    touch-action: manipulation;
}

html :is(button, a, [role="button"], .nav-item, .side-btn, .dash-feature-card, .dash-mini-card, .copy-btn, .replicate-btn, .tool-btn, .btn, .glass-btn, .gen-btn, .primary-btn, .save-btn):active {
    transition-duration: .08s !important;
}

/* Global resolution guard: keep work surfaces stable, and scroll instead of clipping on small screens. */
:root {
    --cb-design-max: 1440px;
    --cb-design-pad: 18px;
}

html {
    overflow-x: hidden !important;
}

body {
    overflow-x: hidden !important;
}

@media (min-width: 981px) {
    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-admin,
        .combeat-page-account,
        .combeat-page-api-settings,
        .combeat-page-payment
    ) body {
        width: 100vw !important;
        min-width: 0 !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
    ) body {
        overflow: auto !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
    ) .studio-shell,
    html:is(.combeat-page-admin, .combeat-page-account, .combeat-page-api-settings, .combeat-page-payment) .shell,
    html.combeat-page-inspiration .shell {
        width: min(var(--cb-design-max), 100vw) !important;
        max-width: var(--cb-design-max) !important;
        margin-left: auto !important;
        margin-right: auto !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
    ) .studio-shell {
        min-height: 720px !important;
        height: max(720px, 100vh) !important;
        grid-template-columns: minmax(0, 1.34fr) minmax(360px, .86fr) !important;
        gap: 18px !important;
    }

    html:is(.combeat-page-admin, .combeat-page-account, .combeat-page-api-settings, .combeat-page-payment) .shell {
        min-height: 720px !important;
        height: max(720px, 100vh) !important;
    }

    html.combeat-page-inspiration .shell {
        padding-left: var(--cb-design-pad) !important;
        padding-right: var(--cb-design-pad) !important;
    }
}

@media (max-width: 980px) {
    html,
    body {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 100% !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !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
    ) .studio-shell {
        width: 100% !important;
        min-height: 100svh !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        padding: 12px !important;
        overflow: visible !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
    ) :is(.studio-main, .studio-side, .dialogue-stage, .composer-wrap, .console-card, .tool-panel, .result-frame) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !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
    ) :is(.result-list, .output-list, .history-panel, .messages, .canvas-list) {
        max-height: none !important;
        overflow: visible !important;
    }

    html:is(.combeat-page-admin, .combeat-page-account, .combeat-page-api-settings, .combeat-page-payment) body {
        overflow-y: auto !important;
    }

    html:is(.combeat-page-admin, .combeat-page-account, .combeat-page-api-settings, .combeat-page-payment) .shell {
        width: 100% !important;
        min-height: 100svh !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important;
    }

    html:is(.combeat-page-admin, .combeat-page-account, .combeat-page-api-settings, .combeat-page-payment) .sidebar {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    html:is(.combeat-page-admin, .combeat-page-account, .combeat-page-api-settings, .combeat-page-payment) :is(.main, .content, .panel, .table-wrap, .record-list, .records-list, .log-list, .invite-list, .payment-list) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
    }

    html.combeat-page-inspiration .shell {
        width: 100% !important;
        min-height: 100svh !important;
        padding: 12px !important;
    }

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

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

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

@media (max-width: 620px) {
    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
    ) .studio-head,
    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
    ) .composer-actions {
        flex-wrap: wrap !important;
        align-items: stretch !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
    ) :is(.studio-account, .generate-btn, .mode-menu-btn, .param-card, .param-fields, .field) {
        max-width: 100% !important;
    }
}

/* Mobile shell guard for /create: keep navigation usable and give the iframe the full remaining screen. */
@media (max-width: 980px) {
    html.combeat-page-index.combeat-top-frame,
    html.combeat-page-index.combeat-top-frame body {
        width: 100% !important;
        height: 100svh !important;
        min-height: 100svh !important;
        max-height: 100svh !important;
        overflow: hidden !important;
    }

    html.combeat-page-index.combeat-top-frame body .app-shell {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        width: 100vw !important;
        height: 100svh !important;
        min-height: 100svh !important;
        max-height: 100svh !important;
        overflow: hidden !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar {
        position: relative !important;
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 76px !important;
        min-height: 76px !important;
        max-height: 76px !important;
        flex: 0 0 76px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 8px 10px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar::-webkit-scrollbar {
        display: none !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar .brand {
        flex: 0 0 44px !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 52px !important;
        padding: 0 !important;
        display: grid !important;
        place-items: center !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar .brand-text,
    html.combeat-page-index.combeat-top-frame body .new-chat-btn,
    html.combeat-page-index.combeat-top-frame body .sidebar-history,
    html.combeat-page-index.combeat-top-frame body .sidebar-section-title,
    html.combeat-page-index.combeat-top-frame body .top-quick-action {
        display: none !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar .nav,
    html.combeat-page-index.combeat-top-frame body .sidebar .side-actions {
        display: flex !important;
        flex: 0 0 auto !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        min-width: max-content !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar :is(.nav-item, .side-btn, .side-home-btn) {
        width: 58px !important;
        min-width: 58px !important;
        max-width: 58px !important;
        height: 56px !important;
        min-height: 56px !important;
        flex: 0 0 58px !important;
        display: inline-flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 3px !important;
        padding: 0 !important;
        border-radius: 14px !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar :is(.nav-item, .side-btn, .side-home-btn) .label {
        display: none !important;
        width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        text-align: center !important;
        font-size: 11px !important;
        line-height: 1.1 !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar :is(.nav-item.active, .side-btn.active, .side-home-btn.active) .label {
        display: block !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar :is(.nav-item, .side-btn, .side-home-btn) svg,
    html.combeat-page-index.combeat-top-frame body .sidebar :is(.nav-item, .side-btn, .side-home-btn) i {
        width: 20px !important;
        height: 20px !important;
        flex: 0 0 20px !important;
    }

    html.combeat-page-index.combeat-top-frame body .stage {
        position: relative !important;
        grid-column: auto !important;
        grid-row: auto !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        height: calc(100svh - 76px) !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
    }

    html.combeat-page-index.combeat-top-frame body .dashboard-view,
    html.combeat-page-index.combeat-top-frame body .stage > iframe {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
    }
}

@media (min-width: 981px) {
    html.combeat-page-index.combeat-top-frame body .dashboard-view {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    html.combeat-page-index.combeat-top-frame body .dash-content {
        width: min(1280px, calc(100vw - 268px - 48px)) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Final workbench alignment: ai-studio uses one centered content axis inside the iframe. */
@media (min-width: 981px) {
    html.combeat-page-ai-studio,
    html.combeat-page-ai-studio body {
        width: 100% !important;
        height: 100vh !important;
        overflow: hidden !important;
    }

    html.combeat-page-ai-studio .studio-shell {
        width: 100% !important;
        max-width: none !important;
        height: 100vh !important;
        min-height: 0 !important;
        padding: clamp(18px, 2.2vw, 34px) clamp(28px, 4vw, 72px) clamp(24px, 3vw, 48px) !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(0, 1fr) auto !important;
        gap: clamp(18px, 2.4vh, 30px) !important;
        justify-items: center !important;
        align-items: stretch !important;
        overflow: hidden !important;
    }

    html.combeat-page-ai-studio .studio-head {
        display: none !important;
    }

    html.combeat-page-ai-studio :is(.dialogue-stage, .composer-wrap) {
        grid-column: 1 !important;
        width: min(1160px, 100%) !important;
        max-width: min(1160px, 100%) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    html.combeat-page-ai-studio .dialogue-stage {
        grid-row: 1 !important;
        height: 100% !important;
        min-height: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    html.combeat-page-ai-studio .result-list {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    html.combeat-page-ai-studio .empty-state {
        width: min(760px, 100%) !important;
        min-height: clamp(300px, 42vh, 470px) !important;
        margin: 0 auto !important;
        padding: 0 24px !important;
        align-self: center !important;
    }

    html.combeat-page-ai-studio .composer-wrap {
        grid-row: 2 !important;
        padding: 0 !important;
        align-self: end !important;
        display: block !important;
    }

    html.combeat-page-ai-studio .composer-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    html.combeat-page-ai-studio .more-tools {
        top: 24px !important;
        right: clamp(28px, 4vw, 72px) !important;
    }
}

/* Inspiration center: fill the iframe width and only spin the load indicator while a page chunk is rendering. */
@media (min-width: 981px) {
    html.combeat-page-inspiration,
    html.combeat-page-inspiration body {
        width: 100% !important;
        height: 100vh !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
    }

    html.combeat-page-inspiration .shell {
        width: 100% !important;
        max-width: none !important;
        height: 100vh !important;
        min-height: 0 !important;
        padding: 24px clamp(28px, 3.2vw, 52px) 26px !important;
        display: block !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-gutter: stable !important;
    }

    html.combeat-page-inspiration .topbar {
        justify-content: center !important;
        padding-bottom: 18px !important;
    }

    html.combeat-page-inspiration .search {
        width: min(620px, 54vw) !important;
    }

    html.combeat-page-inspiration .ad-wrap {
        width: 100% !important;
        max-width: none !important;
        height: clamp(170px, 20vh, 260px) !important;
        margin: 0 0 18px !important;
        border-radius: 18px !important;
    }

    html.combeat-page-inspiration .masonry {
        min-height: 260px !important;
        width: 100% !important;
        max-width: none !important;
        column-width: clamp(230px, 18vw, 330px) !important;
        column-gap: 18px !important;
        overflow: visible !important;
        padding-right: 8px !important;
    }

    html.combeat-page-inspiration .load-trigger {
        margin: 12px auto 0 !important;
    }
}

html.combeat-page-inspiration .load-trigger::before {
    display: none !important;
    animation: none !important;
    border-top-color: var(--line) !important;
}

html.combeat-page-inspiration .load-trigger.is-loading::before {
    display: block !important;
    animation: spin .8s linear infinite !important;
    border-top-color: var(--accent) !important;
}

/* Mobile final repair: keep /create navigation complete and give iframes a stable viewport. */
@media (max-width: 980px) {
    html.combeat-page-index.combeat-top-frame,
    html.combeat-page-index.combeat-top-frame body {
        width: 100% !important;
        height: 100svh !important;
        min-height: 100svh !important;
        max-height: 100svh !important;
        overflow: hidden !important;
    }

    html.combeat-page-index.combeat-top-frame body .app-shell {
        width: 100vw !important;
        height: 100svh !important;
        min-height: 100svh !important;
        max-height: 100svh !important;
        display: grid !important;
        grid-template-rows: 82px minmax(0, 1fr) !important;
        grid-template-columns: minmax(0, 1fr) !important;
        overflow: hidden !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar {
        grid-row: 1 !important;
        grid-column: 1 !important;
        position: relative !important;
        width: 100% !important;
        height: 82px !important;
        min-height: 82px !important;
        max-height: 82px !important;
        flex: none !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        padding: 10px 10px 12px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x proximity !important;
        scrollbar-width: none !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar::-webkit-scrollbar {
        display: none !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar .brand {
        width: 50px !important;
        min-width: 50px !important;
        max-width: 50px !important;
        height: 58px !important;
        flex: 0 0 50px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        place-items: center !important;
        scroll-snap-align: start !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar .brand-text,
    html.combeat-page-index.combeat-top-frame body .sidebar-history,
    html.combeat-page-index.combeat-top-frame body .sidebar-section-title {
        display: none !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar .nav,
    html.combeat-page-index.combeat-top-frame body .sidebar .side-actions {
        position: static !important;
        width: auto !important;
        min-width: max-content !important;
        max-width: none !important;
        height: 58px !important;
        min-height: 58px !important;
        max-height: 58px !important;
        flex: 0 0 auto !important;
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: visible !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar :is(.nav-item, .side-btn, .side-home-btn) {
        width: 58px !important;
        min-width: 58px !important;
        max-width: 58px !important;
        height: 58px !important;
        min-height: 58px !important;
        max-height: 58px !important;
        flex: 0 0 58px !important;
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        padding: 0 !important;
        border-radius: 16px !important;
        scroll-snap-align: start !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar :is(.nav-item, .side-btn, .side-home-btn) .label,
    html.combeat-page-index.combeat-top-frame body .sidebar .account-label,
    html.combeat-page-index.combeat-top-frame body .sidebar .account-row,
    html.combeat-page-index.combeat-top-frame body .sidebar .account-level-mark {
        display: none !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar .nav-item.active .label {
        display: block !important;
        max-width: 54px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 10px !important;
        line-height: 1.05 !important;
    }

    html.combeat-page-index.combeat-top-frame body .stage {
        grid-row: 2 !important;
        grid-column: 1 !important;
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        height: calc(100svh - 82px) !important;
        min-height: 0 !important;
        max-height: calc(100svh - 82px) !important;
        flex: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border-radius: 0 !important;
    }

    html.combeat-page-index.combeat-top-frame body .stage > iframe {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        display: none !important;
    }

    html.combeat-page-index.combeat-top-frame body .stage > iframe.active {
        display: block !important;
    }
}

/* Mobile final repair: ai-studio keeps results readable above the composer. */
@media (max-width: 980px) {
    html.combeat-page-ai-studio,
    html.combeat-page-ai-studio body {
        width: 100% !important;
        height: 100svh !important;
        min-height: 100svh !important;
        max-height: 100svh !important;
        overflow: hidden !important;
    }

    html.combeat-page-ai-studio .studio-shell {
        width: 100% !important;
        max-width: none !important;
        height: 100svh !important;
        min-height: 0 !important;
        max-height: 100svh !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(0, 1fr) auto !important;
        gap: 10px !important;
        padding: 10px !important;
        overflow: hidden !important;
    }

    html.combeat-page-ai-studio .studio-head,
    html.combeat-page-ai-studio .side-head {
        display: none !important;
    }

    html.combeat-page-ai-studio .dialogue-stage {
        grid-row: 1 !important;
        grid-column: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    html.combeat-page-ai-studio .result-list {
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        flex: 1 1 auto !important;
        margin: 0 !important;
        padding: 8px 8px 14px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-gutter: stable !important;
        -webkit-overflow-scrolling: touch !important;
    }

    html.combeat-page-ai-studio .empty-state {
        width: 100% !important;
        min-height: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 18px 12px !important;
        display: grid !important;
        place-items: center !important;
        align-self: stretch !important;
    }

    html.combeat-page-ai-studio .empty-orb {
        width: 64px !important;
        height: 64px !important;
        border-radius: 20px !important;
        margin-bottom: 12px !important;
    }

    html.combeat-page-ai-studio .empty-state strong {
        font-size: clamp(22px, 7vw, 30px) !important;
        line-height: 1.15 !important;
    }

    html.combeat-page-ai-studio .empty-state p {
        max-width: 280px !important;
        font-size: 12px !important;
        line-height: 1.55 !important;
    }

    html.combeat-page-ai-studio :is(.result-card, .loading-card) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
    }

    html.combeat-page-ai-studio .composer-wrap {
        grid-row: 2 !important;
        grid-column: 1 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        display: block !important;
        overflow: visible !important;
    }

    html.combeat-page-ai-studio .composer-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: 220px !important;
        margin: 0 !important;
        border-radius: 22px !important;
        overflow: hidden !important;
    }

    html.combeat-page-ai-studio #promptInput {
        height: clamp(82px, 18svh, 118px) !important;
        min-height: 82px !important;
        max-height: 118px !important;
        padding: 14px 14px 8px !important;
        font-size: 14px !important;
        line-height: 1.55 !important;
        overflow-y: auto !important;
    }

    html.combeat-page-ai-studio .composer-actions {
        min-height: 54px !important;
        height: auto !important;
        max-height: 76px !important;
        padding: 8px 10px 10px !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
    }

    html.combeat-page-ai-studio .composer-actions::-webkit-scrollbar {
        display: none !important;
    }

    html.combeat-page-ai-studio :is(.circle-tool, .mode-menu-btn, .route-toggle, #generateBtn) {
        flex: 0 0 auto !important;
    }

    html.combeat-page-ai-studio #generateBtn {
        min-width: 104px !important;
        max-width: 138px !important;
        height: 42px !important;
        margin-left: auto !important;
    }

    html.combeat-page-ai-studio .more-tools {
        top: 12px !important;
        right: 12px !important;
    }
}

/* Mobile final pass: two-row navigation and uncropped ai-studio output. */
@media (max-width: 980px) {
    html.combeat-page-index.combeat-top-frame body .app-shell {
        grid-template-rows: 112px minmax(0, 1fr) !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar {
        height: 112px !important;
        min-height: 112px !important;
        max-height: 112px !important;
        display: grid !important;
        grid-template-columns: 52px minmax(0, 1fr) !important;
        grid-template-rows: 48px 48px !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 8px 10px !important;
        overflow: hidden !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar .brand {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar .nav {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 48px !important;
        justify-content: space-between !important;
        overflow: hidden !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar .side-actions {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 48px !important;
        justify-content: space-between !important;
        overflow: hidden !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar :is(.nav-item, .side-btn, .side-home-btn) {
        width: 48px !important;
        min-width: 0 !important;
        max-width: 56px !important;
        flex: 1 1 0 !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
    }

    html.combeat-page-index.combeat-top-frame body .stage {
        height: calc(100svh - 112px) !important;
        max-height: calc(100svh - 112px) !important;
    }

    html.combeat-page-index.combeat-top-frame body .stage > iframe {
        height: 100% !important;
    }

    html.combeat-page-ai-studio .result-card,
    html.combeat-page-ai-studio .loading-card,
    html.combeat-page-ai-studio .result-card.assistant-card,
    html.combeat-page-ai-studio .result-card.user-card {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    html.combeat-page-ai-studio .result-text {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        white-space: pre-wrap !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        line-height: 1.65 !important;
    }

    html.combeat-page-ai-studio .result-media {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Mobile readability pass: show concise full labels and make generated text legible. */
@media (max-width: 980px) {
    html.combeat-page-index.combeat-top-frame body .sidebar :is(.nav-item, .side-btn, .side-home-btn) {
        gap: 3px !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar :is(.nav-item, .side-btn, .side-home-btn) .label,
    html.combeat-page-index.combeat-top-frame body .sidebar :is(.nav-item, .side-btn, .side-home-btn) .label::after,
    html.combeat-page-index.combeat-top-frame body .sidebar .account-label,
    html.combeat-page-index.combeat-top-frame body .sidebar .account-row,
    html.combeat-page-index.combeat-top-frame body .sidebar .account-name,
    html.combeat-page-index.combeat-top-frame body .sidebar .account-credits,
    html.combeat-page-index.combeat-top-frame body .sidebar .account-free,
    html.combeat-page-index.combeat-top-frame body .sidebar .account-level-mark {
        content: none !important;
        display: none !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar :is(.nav-item, .side-btn, .side-home-btn) > :not(i):not(svg):not(img),
    html.combeat-page-index.combeat-top-frame body .sidebar :is(.nav-item, .side-btn, .side-home-btn) :is(span, div, small, strong, em) {
        display: none !important;
        content: none !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar :is(.nav-item, .side-btn, .side-home-btn) :is(i, svg, img) {
        display: block !important;
    }

    html.combeat-page-ai-studio .result-card {
        background:
            radial-gradient(circle at 18% 0%, rgba(255,255,255,.13), transparent 36%),
            linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.075)) !important;
        border: 1px solid rgba(255,255,255,.14) !important;
    }

    html.combeat-page-ai-studio .result-text {
        color: rgba(246, 249, 255, .94) !important;
        font-size: 14px !important;
        font-weight: 760 !important;
    }
}

.mobile-account-menu,
.mobile-account-menu[aria-hidden="true"],
html.combeat-page-index.combeat-top-frame body .mobile-account-menu {
    display: none !important;
}

html.combeat-page-login .auth-card,
html.combeat-page-login.dialog-auth .auth-card,
html.combeat-page-login.embedded-auth .auth-card {
    background:
        radial-gradient(circle at 88% 82%, rgba(22, 140, 255, .08), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, .043), rgba(255, 255, 255, .016)),
        rgba(38, 39, 58, .84) !important;
    border: 1px solid rgba(151, 156, 188, .16) !important;
    box-shadow: 0 18px 46px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08) !important;
    backdrop-filter: blur(26px) saturate(1.14) !important;
    -webkit-backdrop-filter: blur(26px) saturate(1.14) !important;
}

/* Mobile requested layout: bottom three-feature nav, account menu in the top-right login button. */
@media (max-width: 980px) {
    html.combeat-page-index.combeat-top-frame body .app-shell {
        grid-template-rows: 64px minmax(0, 1fr) 72px !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar {
        grid-row: 1 / -1 !important;
        grid-column: 1 !important;
        position: relative !important;
        width: 100% !important;
        height: 100svh !important;
        min-height: 100svh !important;
        max-height: 100svh !important;
        display: contents !important;
        padding: 0 !important;
        overflow: visible !important;
        background: transparent !important;
        border: 0 !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar .brand {
        position: fixed !important;
        top: 10px !important;
        left: 12px !important;
        z-index: 50 !important;
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        display: grid !important;
        place-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 16px !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar .brand-mark {
        width: 42px !important;
        height: 42px !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar .brand-text,
    html.combeat-page-index.combeat-top-frame body .sidebar-history,
    html.combeat-page-index.combeat-top-frame body .sidebar-section-title {
        display: none !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar .side-actions {
        display: contents !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar .side-actions > :not(#accountBtn) {
        display: none !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar #accountBtn {
        position: fixed !important;
        top: 10px !important;
        right: 12px !important;
        z-index: 56 !important;
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        display: grid !important;
        place-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 16px !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar .nav {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 54 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 62px !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 8px !important;
        border-radius: 24px !important;
        background: rgba(25, 28, 44, .76) !important;
        border: 1px solid rgba(255,255,255,.12) !important;
        box-shadow: 0 18px 54px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.07) !important;
        backdrop-filter: blur(22px) saturate(1.16) !important;
        overflow: hidden !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar .nav .nav-item {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        flex: none !important;
        display: grid !important;
        place-items: center !important;
        padding: 0 !important;
        border-radius: 18px !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar :is(.nav-item, #accountBtn) > :not(i):not(svg):not(img),
    html.combeat-page-index.combeat-top-frame body .sidebar :is(.nav-item, #accountBtn) :is(span, div, small, strong, em) {
        display: none !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar :is(.nav-item, #accountBtn) :is(i, svg, img) {
        display: block !important;
        width: 22px !important;
        height: 22px !important;
    }

    html.combeat-page-index.combeat-top-frame body .stage {
        grid-row: 2 !important;
        grid-column: 1 !important;
        position: relative !important;
        width: 100% !important;
        height: calc(100svh - 136px - env(safe-area-inset-bottom, 0px)) !important;
        min-height: 0 !important;
        max-height: calc(100svh - 136px - env(safe-area-inset-bottom, 0px)) !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border-radius: 0 !important;
    }

    html.combeat-page-index.combeat-top-frame body .stage > iframe,
    html.combeat-page-index.combeat-top-frame body .stage > iframe.active {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
    }

    html.combeat-page-index.combeat-top-frame body .mobile-account-menu {
        position: fixed !important;
        top: 64px !important;
        right: 12px !important;
        z-index: 70 !important;
        width: 184px !important;
        display: none !important;
        flex-direction: column !important;
        gap: 6px !important;
        padding: 8px !important;
        border-radius: 18px !important;
        background: rgba(26, 29, 45, .92) !important;
        border: 1px solid rgba(255,255,255,.14) !important;
        box-shadow: 0 18px 54px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.08) !important;
        backdrop-filter: blur(22px) saturate(1.16) !important;
    }

    html.combeat-page-index.combeat-top-frame body .mobile-account-menu.show {
        display: flex !important;
    }

    html.combeat-page-index.combeat-top-frame body .mobile-account-menu button {
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        gap: 9px !important;
        padding: 0 10px !important;
        border-radius: 12px !important;
        color: rgba(245,248,255,.9) !important;
        background: rgba(255,255,255,.06) !important;
        border: 1px solid rgba(255,255,255,.08) !important;
        font-size: 13px !important;
        font-weight: 850 !important;
    }

    html.combeat-page-index.combeat-top-frame body .mobile-account-menu button svg,
    html.combeat-page-index.combeat-top-frame body .mobile-account-menu button i {
        width: 17px !important;
        height: 17px !important;
    }
}

/* Mobile bottom nav polish: creation stays centered; active state is icon glow only. */
@media (max-width: 980px) {
    html.combeat-page-index.combeat-top-frame body .sidebar .nav .nav-item[data-page="inspiration"] {
        order: 1 !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar .nav .nav-item[data-page="ai-studio"] {
        order: 2 !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar .nav .nav-item[data-page="canvas"] {
        order: 3 !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar .nav .nav-item,
    html.combeat-page-index.combeat-top-frame body .sidebar .nav .nav-item:hover,
    html.combeat-page-index.combeat-top-frame body .sidebar .nav .nav-item.active {
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        transform: none !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar .nav .nav-item::before,
    html.combeat-page-index.combeat-top-frame body .sidebar .nav .nav-item::after,
    html.combeat-page-index.combeat-top-frame body .sidebar .nav .nav-item.active::before,
    html.combeat-page-index.combeat-top-frame body .sidebar .nav .nav-item.active::after {
        content: none !important;
        display: none !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar .nav .nav-item[data-page="ai-studio"] :is(i, svg) {
        width: 26px !important;
        height: 26px !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar .nav .nav-item.active :is(i, svg) {
        color: #55f5ff !important;
        stroke: #55f5ff !important;
        filter:
            drop-shadow(0 0 8px rgba(85, 245, 255, .72))
            drop-shadow(0 0 18px rgba(38, 140, 255, .42)) !important;
        animation: cbMobileNavIconGlow 2.15s ease-in-out infinite !important;
    }

    html.combeat-page-index.combeat-top-frame body .sidebar .nav .nav-item.active :is(i, svg) :is(path, rect, circle, polygon, line, polyline) {
        stroke: currentColor !important;
    }
}

@keyframes cbMobileNavIconGlow {
    0%, 100% {
        transform: translateY(0) scale(1);
        filter:
            drop-shadow(0 0 7px rgba(85, 245, 255, .62))
            drop-shadow(0 0 16px rgba(38, 140, 255, .38));
    }
    50% {
        transform: translateY(-2px) scale(1.08);
        filter:
            drop-shadow(0 0 13px rgba(85, 245, 255, .92))
            drop-shadow(0 0 28px rgba(168, 85, 247, .50));
    }
}

/* Admin and account final layout guard: fixed function rail, full-width content, page-level scrolling. */
html:is(.combeat-page-admin, .combeat-page-account, .combeat-page-api-settings) body {
    min-height: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

html:is(.combeat-page-admin, .combeat-page-account) .shell {
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
}

html:is(.combeat-page-admin, .combeat-page-account) .sidebar {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

html:is(.combeat-page-admin, .combeat-page-account) :is(.main, .content, .panel) {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
}

html:is(.combeat-page-admin, .combeat-page-account) .content {
    padding-left: clamp(22px, 2.4vw, 46px) !important;
    padding-right: clamp(22px, 2.4vw, 46px) !important;
    padding-bottom: 42px !important;
}

html:is(.combeat-page-admin, .combeat-page-account) :is(.table-wrap, .record-list, .records-list, .log-list, .invite-list, .payment-list) {
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: auto !important;
}

html.combeat-page-admin .api-frame {
    width: 100% !important;
    max-width: none !important;
    min-height: 980px !important;
    height: 980px;
    overflow: hidden !important;
}

html.combeat-page-api-settings.embedded-api-settings,
html.combeat-page-api-settings.embedded-api-settings body,
html.combeat-page-api-settings.embedded-api-settings .page,
html.combeat-page-api-settings.embedded-api-settings .wrap,
html.combeat-page-api-settings.embedded-api-settings .layout,
html.combeat-page-api-settings.embedded-api-settings .content {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

@media (max-width: 980px) {
    html:is(.combeat-page-admin, .combeat-page-account) .shell {
        display: flex !important;
        flex-direction: column !important;
    }

    html:is(.combeat-page-admin, .combeat-page-account) .sidebar {
        position: sticky !important;
        top: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        z-index: 20 !important;
    }
}

/* Final guard: long chat and restored history answers expand fully inside the bounded transcript area. */
html.combeat-page-ai-studio .result-list,
html.combeat-page-gpt-chat .messages {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
}

html.combeat-page-ai-studio :is(.chat-message-row, .result-card, .loading-card),
html.combeat-page-ai-studio .chat-message-row .result-card,
html.combeat-page-gpt-chat :is(.bubble-row, .bubble, .bubble.assistant, .bubble.user) {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

html.combeat-page-ai-studio :is(.result-text, .result-card.assistant-card .result-text, .result-card.user-card .result-text),
html.combeat-page-gpt-chat :is(.bubble-text, .message-text) {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    -webkit-box-orient: initial !important;
}

/* 2026-06 membership polish: unified product surfaces, readable light/dark, mobile overflow guard. */
:root {
    --cb-bg: #171924;
    --cb-bg-deep: #0f1118;
    --cb-panel: rgba(25, 28, 38, .82);
    --cb-panel-strong: rgba(31, 35, 47, .94);
    --cb-panel-soft: rgba(255, 255, 255, .055);
    --cb-line: rgba(255, 255, 255, .10);
    --cb-line-strong: rgba(255, 255, 255, .18);
    --cb-text: #f7f8fb;
    --cb-muted: #a7adbb;
    --cb-faint: #737b8d;
    --cb-blue: #168cff;
    --cb-blue-2: #45c4ff;
}

html:not(.studio-theme-dark) {
    --cb-bg: #f4f7fb;
    --cb-bg-deep: #eaf1f8;
    --cb-panel: rgba(255, 255, 255, .82);
    --cb-panel-strong: rgba(255, 255, 255, .96);
    --cb-panel-soft: rgba(15, 32, 54, .052);
    --cb-line: rgba(20, 31, 48, .11);
    --cb-line-strong: rgba(20, 31, 48, .18);
    --cb-text: #111827;
    --cb-muted: #5f6b7d;
    --cb-faint: #8a94a5;
    --cb-shadow: 0 18px 46px rgba(31, 50, 74, .10);
    --cb-shadow-soft: 0 10px 28px rgba(31, 50, 74, .08);
}

body,
html.studio-theme-dark body,
body.studio-theme-dark {
    background:
        radial-gradient(circle at 82% 9%, rgba(22, 140, 255, .11), transparent 28%),
        radial-gradient(circle at 18% 20%, rgba(69, 196, 255, .07), transparent 32%),
        linear-gradient(135deg, var(--cb-bg) 0%, var(--cb-bg-deep) 100%) !important;
}

html:not(.studio-theme-dark) body {
    background:
        radial-gradient(circle at 80% 10%, rgba(22, 140, 255, .095), transparent 30%),
        radial-gradient(circle at 18% 16%, rgba(69, 196, 255, .075), transparent 32%),
        linear-gradient(135deg, var(--cb-bg) 0%, var(--cb-bg-deep) 100%) !important;
}

html:is(.combeat-page-admin, .combeat-page-account, .combeat-page-payment) :is(.card, .panel, .table-wrap, .record-card, .notice-card, .tool-card, .plan, .account-chip, .billing-tabs) {
    border-color: var(--cb-line) !important;
    color: var(--cb-text) !important;
}

html:not(.studio-theme-dark):is(.combeat-page-admin, .combeat-page-account, .combeat-page-payment) :is(.card, .panel, .table-wrap, .record-card, .notice-card, .tool-card, .plan, .account-chip, .billing-tabs) {
    background: var(--cb-panel) !important;
    box-shadow: var(--cb-shadow-soft) !important;
}

html.studio-theme-dark:is(.combeat-page-admin, .combeat-page-account, .combeat-page-payment) :is(.card, .panel, .table-wrap, .record-card, .notice-card, .tool-card, .plan, .account-chip, .billing-tabs),
body.studio-theme-dark :is(.card, .panel, .table-wrap, .record-card, .notice-card, .tool-card, .plan, .account-chip, .billing-tabs) {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .026)),
        var(--cb-panel) !important;
    box-shadow: var(--cb-shadow-soft) !important;
}

html.combeat-page-payment .plan-svip_plus {
    border-color: rgba(130, 87, 230, .38) !important;
}

html.combeat-page-payment .page {
    padding-top: clamp(18px, 3vh, 36px) !important;
    padding-bottom: clamp(24px, 4vh, 46px) !important;
}

html.combeat-page-payment .page-hero h1 {
    text-wrap: balance;
}

html.combeat-page-payment .page-hero p {
    max-width: 66ch;
}

html:is(.combeat-page-admin, .combeat-page-account, .combeat-page-payment) :is(.section-head, .topbar, .tool-head, .plan-head) p {
    color: var(--cb-muted) !important;
}

html:is(.combeat-page-admin, .combeat-page-account) .nav-btn {
    min-height: 40px;
}

html:is(.combeat-page-admin, .combeat-page-account) .nav-btn.active {
    background: linear-gradient(135deg, #111827, #2a3342) !important;
    border-color: rgba(255, 255, 255, .18) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .20) !important;
}

html:not(.studio-theme-dark):is(.combeat-page-admin, .combeat-page-account) .nav-btn.active {
    background: #111827 !important;
    color: #fff !important;
}

@media (max-width: 980px) {
    html:is(.combeat-page-admin, .combeat-page-account) .sidebar {
        border-bottom: 1px solid var(--cb-line) !important;
        background: color-mix(in srgb, var(--cb-bg) 82%, transparent) !important;
        backdrop-filter: blur(18px) !important;
    }

    html:is(.combeat-page-admin, .combeat-page-account) .nav {
        overflow-x: auto !important;
        scrollbar-width: none;
    }

    html:is(.combeat-page-admin, .combeat-page-account) .nav::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 700px) {
    html:is(.combeat-page-admin, .combeat-page-account, .combeat-page-payment),
    html:is(.combeat-page-admin, .combeat-page-account, .combeat-page-payment) body {
        width: 100% !important;
        overflow-x: hidden !important;
    }

    html.combeat-page-payment body {
        align-items: flex-start !important;
    }

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

    html.combeat-page-payment .page-hero {
        gap: 14px !important;
        margin-bottom: 14px !important;
    }

    html.combeat-page-payment .page-hero h1 {
        font-size: 30px !important;
        line-height: 1.12 !important;
    }

    html.combeat-page-payment .page-hero p {
        font-size: 13px !important;
        line-height: 1.62 !important;
    }

    html.combeat-page-payment .account-strip {
        grid-template-columns: 1fr !important;
        height: auto !important;
    }

    html.combeat-page-payment .account-chip {
        height: auto !important;
        min-height: 56px !important;
    }

    html.combeat-page-payment .plans,
    html.combeat-page-payment .tools {
        gap: 12px !important;
    }

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

    html.combeat-page-payment .plan-head,
    html.combeat-page-payment .plan-body,
    html.combeat-page-payment .tool-card {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

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

    html:is(.combeat-page-admin, .combeat-page-account) .content {
        padding: 14px 12px 28px !important;
    }

    html:is(.combeat-page-admin, .combeat-page-account) :is(.field-grid, .site-mini, .cards, .cards.compact, .contact-grid, .notice-card) {
        grid-template-columns: 1fr !important;
    }

    html:is(.combeat-page-admin, .combeat-page-account) :is(.section-head, .topbar, .btn-row, .section-actions) {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    html:is(.combeat-page-admin, .combeat-page-account) :is(.btn, button, .input, .select, .textarea) {
        max-width: 100% !important;
    }

    html:is(.combeat-page-admin, .combeat-page-account) .table-wrap table {
        min-width: 720px;
    }
}

/* 2026-06-08 light mode readability repair for consumer pages. */
html:not(.studio-theme-dark).combeat-page-ai-studio {
    --bg: #f4f7fb !important;
    --panel: rgba(255,255,255,.88) !important;
    --panel-strong: rgba(255,255,255,.96) !important;
    --panel-soft: rgba(15,32,54,.055) !important;
    --text: #101828 !important;
    --muted: #475467 !important;
    --line: rgba(15,23,42,.12) !important;
    --soft: rgba(15,23,42,.07) !important;
    --control: rgba(255,255,255,.86) !important;
    --control-strong: rgba(255,255,255,.96) !important;
    --control-text: #101828 !important;
    --control-muted: #667085 !important;
    --shadow: 0 18px 46px rgba(31,50,74,.12) !important;
}

html:not(.studio-theme-dark).combeat-page-ai-studio body {
    color: #101828 !important;
    background:
        radial-gradient(circle at 18% 12%, rgba(22,139,255,.10), transparent 28%),
        radial-gradient(circle at 82% 88%, rgba(53,224,196,.08), transparent 30%),
        linear-gradient(135deg, #f8fbff 0%, #eef4fb 100%) !important;
}

html:not(.studio-theme-dark).combeat-page-ai-studio :is(.studio-main, .studio-side, .composer-card, .param-card, .result-card, .history-pop, .history-item) {
    background:
        radial-gradient(circle at 18% 0%, rgba(22,139,255,.08), transparent 34%),
        rgba(255,255,255,.90) !important;
    border-color: rgba(15,23,42,.12) !important;
    box-shadow: 0 16px 42px rgba(31,50,74,.10) !important;
    color: #101828 !important;
}

html:not(.studio-theme-dark).combeat-page-ai-studio :is(.empty-state, .dialogue-stage) {
    color: #101828 !important;
}

html:not(.studio-theme-dark).combeat-page-ai-studio :is(.empty-state strong, .result-text, .mode-name, .history-item p, .file-preview) {
    color: #101828 !important;
}

html:not(.studio-theme-dark).combeat-page-ai-studio :is(.empty-state p, .studio-title p, .side-head p, .field label, .result-meta span, .file-preview small) {
    color: #475467 !important;
}

html:not(.studio-theme-dark).combeat-page-ai-studio #promptInput {
    color: #101828 !important;
    caret-color: #168bff !important;
}

html:not(.studio-theme-dark).combeat-page-ai-studio #promptInput::placeholder {
    color: #667085 !important;
}

html:not(.studio-theme-dark).combeat-page-ai-studio :is(.ghost-btn, .session-chip, .level-chip, .select-wrap select, .field input, .seg button, .model-badges .badge, .upload-tile) {
    color: #101828 !important;
    background: rgba(255,255,255,.88) !important;
    border-color: rgba(15,23,42,.12) !important;
    box-shadow: 0 8px 18px rgba(31,50,74,.08) !important;
}

html:not(.studio-theme-dark).combeat-page-ai-studio :is(.select-wrap select option) {
    color: #101828 !important;
    background: #fff !important;
}

html:not(.studio-theme-dark).combeat-page-payment {
    --bg: #f4f7fb !important;
    --card: rgba(255,255,255,.94) !important;
    --card-soft: rgba(248,250,252,.96) !important;
    --line: rgba(15,23,42,.12) !important;
    --line-strong: rgba(15,23,42,.20) !important;
    --text: #101828 !important;
    --muted: #475467 !important;
    --faint: #667085 !important;
}

html:not(.studio-theme-dark).combeat-page-payment body {
    color: #101828 !important;
    background:
        radial-gradient(circle at 16% 8%, rgba(25,140,255,.08), transparent 26%),
        linear-gradient(180deg, #fbfcff 0%, #f4f7fb 52%, #edf4fb 100%) !important;
}

html:not(.studio-theme-dark).combeat-page-payment :is(h1, h2, h3, .plan-name, .price b, .quota strong, .benefit-list li, .account-chip strong, .invite-link code, .tool-head h2) {
    color: #101828 !important;
}

html:not(.studio-theme-dark).combeat-page-payment :is(.page-hero p, .price span, .price .unit, .price-note, .quota span, .benefit-list small, .tool-head p, .note, .account-chip span, .paid-estimate, .billing-tab:not(.active)) {
    color: #475467 !important;
}

html:not(.studio-theme-dark).combeat-page-payment :is(.plan, .tool-card, .account-chip, .billing-tabs, .invite-link, .input, .ghost-btn) {
    color: #101828 !important;
    background: rgba(255,255,255,.94) !important;
    border-color: rgba(15,23,42,.12) !important;
    box-shadow: 0 14px 34px rgba(31,50,74,.10) !important;
}

html:not(.studio-theme-dark).combeat-page-payment :is(.input::placeholder) {
    color: #667085 !important;
}

html:not(.studio-theme-dark):is(.combeat-page-inspiration, .combeat-page-login, .combeat-page-admin-login, .combeat-page-account, .combeat-page-admin) {
    --text: #101828 !important;
    --muted: #475467 !important;
}

@media (max-width: 700px) {
    html.combeat-page-payment .page {
        width: min(100% - 28px, 1320px) !important;
        padding-top: 22px !important;
        padding-bottom: 34px !important;
    }

    html.combeat-page-payment .page-hero {
        gap: 18px !important;
        margin-bottom: 18px !important;
    }

    html.combeat-page-payment .account-panel {
        width: 100% !important;
        max-width: none !important;
        display: grid !important;
        gap: 12px !important;
    }

    html.combeat-page-payment .account-strip {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        height: auto !important;
    }

    html.combeat-page-payment .billing-tabs {
        margin-top: 0 !important;
        height: auto !important;
    }

    html.combeat-page-payment .billing-tab {
        height: 40px !important;
        font-size: 13px !important;
    }

    html.combeat-page-payment .plans,
    html.combeat-page-payment .tools {
        gap: 16px !important;
    }

    html.combeat-page-payment .plan-head {
        padding-top: 18px !important;
        padding-bottom: 16px !important;
    }

    html.combeat-page-payment .plan-body {
        gap: 14px !important;
        padding-bottom: 24px !important;
    }
}

/* 2026-06-08 mobile payment spacing repair: keep membership content readable inside /create and direct pages. */
@media (max-width: 700px) {
    html.combeat-page-payment body {
        min-height: 100dvh !important;
        align-items: flex-start !important;
    }

    html.combeat-page-payment .page {
        width: calc(100% - 24px) !important;
        max-width: 420px !important;
        padding-top: 18px !important;
        padding-bottom: 34px !important;
        gap: 0 !important;
        justify-content: flex-start !important;
    }

    html.combeat-page-payment .page-hero {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
        margin-bottom: 14px !important;
    }

    html.combeat-page-payment .page-kicker {
        margin-bottom: 7px !important;
        font-size: 11px !important;
    }

    html.combeat-page-payment .page-hero h1 {
        font-size: 27px !important;
        line-height: 1.14 !important;
        text-wrap: balance !important;
    }

    html.combeat-page-payment .page-hero p {
        margin-top: 8px !important;
        font-size: 13px !important;
        line-height: 1.58 !important;
        max-width: none !important;
    }

    html.combeat-page-payment .account-panel {
        display: grid !important;
        gap: 9px !important;
    }

    html.combeat-page-payment .account-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 11px !important;
        padding: 6px !important;
        border: 1px solid var(--line) !important;
        border-radius: 15px !important;
        background: var(--card) !important;
        box-shadow: var(--shadow-soft) !important;
    }

    html.combeat-page-payment .account-chip {
        min-height: 50px !important;
        padding: 8px 8px !important;
        border-radius: 10px !important;
        border-color: transparent !important;
        background: var(--card-soft) !important;
        box-shadow: none !important;
    }

    html.combeat-page-payment .account-chip span {
        font-size: 10px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }

    html.combeat-page-payment .account-chip strong {
        margin-top: 5px !important;
        font-size: 13px !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html.combeat-page-payment .billing-tabs {
        padding: 5px !important;
        border-radius: 15px !important;
    }

    html.combeat-page-payment .billing-tab {
        height: 40px !important;
        border-radius: 11px !important;
        font-size: 13px !important;
    }

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

    html.combeat-page-payment .plan,
    html.combeat-page-payment .tool-card {
        border-radius: 15px !important;
    }

    html.combeat-page-payment .plan-head {
        padding: 17px 16px 15px !important;
    }

    html.combeat-page-payment .plan-name-row {
        align-items: flex-start !important;
    }

    html.combeat-page-payment .price {
        margin-top: 12px !important;
        margin-bottom: 7px !important;
    }

    html.combeat-page-payment .price b {
        font-size: 38px !important;
        line-height: .95 !important;
    }

    html.combeat-page-payment .price-note,
    html.combeat-page-payment .quota span,
    html.combeat-page-payment .paid-estimate,
    html.combeat-page-payment .benefit-list small,
    html.combeat-page-payment .note {
        line-height: 1.58 !important;
    }

    html.combeat-page-payment .quota {
        margin-top: 11px !important;
        gap: 5px !important;
    }

    html.combeat-page-payment .quota strong {
        font-size: 21px !important;
    }

    html.combeat-page-payment .paid-estimate {
        display: none !important;
    }

    html.combeat-page-payment .open-btn {
        height: 42px !important;
        margin-top: 12px !important;
        font-size: 15px !important;
    }

    html.combeat-page-payment .plan-body {
        padding: 15px 16px 20px !important;
        gap: 13px !important;
    }

    html.combeat-page-payment .benefit-list {
        gap: 10px !important;
    }

    html.combeat-page-payment .benefit-list li {
        gap: 9px !important;
        font-size: 12px !important;
        line-height: 1.42 !important;
    }

    html.combeat-page-payment .benefit-list small {
        font-size: 10px !important;
    }

    html.combeat-page-payment .benefit-list i {
        width: 16px !important;
        height: 16px !important;
    }

    html.combeat-page-payment .tools {
        margin-top: 14px !important;
    }

    html.combeat-page-payment .tool-card {
        min-height: 0 !important;
        padding: 18px !important;
    }

    html.combeat-page-payment .tool-head {
        margin-bottom: 13px !important;
    }

    html.combeat-page-payment .tool-head h2 {
        font-size: 17px !important;
    }

    html.combeat-page-payment .field-grid {
        grid-template-columns: 1fr !important;
        gap: 11px !important;
    }

    html.combeat-page-payment .input,
    html.combeat-page-payment .ghost-btn,
    html.combeat-page-payment .primary-btn {
        width: 100% !important;
        min-width: 0 !important;
        height: 44px !important;
    }

    html.combeat-page-payment .invite-link {
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 12px !important;
    }

    html.combeat-page-payment .invite-link code {
        white-space: normal !important;
        line-height: 1.5 !important;
        overflow-wrap: anywhere !important;
    }
}

/* 2026-06-08 responsive audit guard: keep mobile pages inside the viewport. */
@media (max-width: 700px) {
    html,
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    html.combeat-page-ai-studio .composer-actions {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: auto auto minmax(0, 1fr) auto !important;
        align-items: center !important;
        overflow-x: hidden !important;
    }

    html.combeat-page-ai-studio .mode-strip {
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
        justify-self: stretch !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
    }

    html.combeat-page-ai-studio .mode-strip::-webkit-scrollbar {
        display: none !important;
    }

    html.combeat-page-ai-studio .mode-strip:not(.open) {
        width: 0 !important;
    }

    html.combeat-page-ai-studio .mode-btn {
        min-width: 72px !important;
        max-width: 96px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    html.combeat-page-ai-studio .param-card.open .param-fields {
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
    }

    html.combeat-page-ai-studio .param-card.open .param-fields::-webkit-scrollbar {
        display: none !important;
    }

    html.combeat-page-home .love-row,
    html.combeat-page-home .love-marquee,
    html.combeat-page-home .love-section {
        max-width: 100% !important;
        overflow: hidden !important;
    }
}