/* Quodara user-facing themes.
 * Loaded after page-local styles so all three HTML entry points share one
 * visual hierarchy without duplicating theme-specific rules.
 */
:root,
html[data-theme="warm"] {
    color-scheme: light;
    --surface-canvas: #ebe7df;
    --surface-sidebar: #e1dcd2;
    --surface-main: #f3efe8;
    --surface-panel: #fffdf8;
    --surface-panel-muted: #f7f2ea;
    --surface-panel-strong: #fffefb;
    --surface-inset: #eee8de;
    --surface-hover: #e9e3d9;
    --surface-active: #ded7cb;
    --surface-user-message: #e8e1d6;
    --surface-agent-message: #f8f4ed;
    --surface-overlay: rgba(39, 35, 30, 0.42);

    --text-heading: #211f1b;
    --text-body: #403d37;
    --text-subtle: #69645c;
    --text-faint: #8d877e;
    --text-on-accent: #ffffff;

    --line-soft: rgba(48, 43, 36, 0.10);
    --line-default: rgba(48, 43, 36, 0.16);
    --line-strong: rgba(48, 43, 36, 0.24);
    --focus-ring: rgba(59, 130, 246, 0.20);

    --elevation-1: 0 1px 2px rgba(48, 43, 36, 0.06), 0 4px 12px rgba(48, 43, 36, 0.035);
    --elevation-2: 0 2px 4px rgba(48, 43, 36, 0.06), 0 12px 30px rgba(48, 43, 36, 0.08);
    --elevation-3: 0 18px 56px rgba(48, 43, 36, 0.16);

    --bg-primary: var(--surface-canvas);
    --bg-secondary: var(--surface-sidebar);
    --bg-tertiary: var(--surface-inset);
    --bg-card: var(--surface-panel);
    --text-primary: var(--text-heading);
    --text-secondary: var(--text-subtle);
    --text-muted: var(--text-faint);
    --text-tertiary: var(--text-faint);
    --border-color: var(--line-default);
    --shadow-sm: var(--elevation-1);
    --shadow-md: var(--elevation-2);
    --shadow-lg: var(--elevation-3);
    --accent-primary: #3478dc;
    --accent-secondary: #5c91e3;
    --accent-success: #21845b;
    --accent-warning: #b66b19;
    --accent-danger: #c93f45;
    --accent-purple: #745fc7;
    --ase-cyan: #4d8e94;
    --ase-blue: #3478dc;
    --ase-amber: #b66b19;
    --ase-green: #21845b;
    --ase-gradient: linear-gradient(180deg, #4b8be8 0%, #3478dc 100%);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --surface-canvas: #080a0c;
    --surface-sidebar: #101316;
    --surface-main: #0c0f11;
    --surface-panel: #161a1d;
    --surface-panel-muted: #1b2024;
    --surface-panel-strong: #20262a;
    --surface-inset: #0b0e10;
    --surface-hover: #23292e;
    --surface-active: #2a3238;
    --surface-user-message: #1b2227;
    --surface-agent-message: #111518;
    --surface-overlay: rgba(0, 0, 0, 0.72);

    --text-heading: #f1f3f4;
    --text-body: #d2d6d9;
    --text-subtle: #a8afb5;
    --text-faint: #7d878f;
    --text-on-accent: #07111f;

    --line-soft: rgba(229, 235, 240, 0.08);
    --line-default: rgba(229, 235, 240, 0.14);
    --line-strong: rgba(229, 235, 240, 0.24);
    --focus-ring: rgba(110, 168, 254, 0.26);

    --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.30), 0 5px 16px rgba(0, 0, 0, 0.16);
    --elevation-2: 0 3px 8px rgba(0, 0, 0, 0.30), 0 16px 36px rgba(0, 0, 0, 0.24);
    --elevation-3: 0 20px 64px rgba(0, 0, 0, 0.55);

    --accent-primary: #6ea8fe;
    --accent-secondary: #8cb9ff;
    --accent-success: #52c98b;
    --accent-warning: #e0a04b;
    --accent-danger: #ff737b;
    --accent-purple: #aa98ff;
    --ase-cyan: #61c7c0;
    --ase-blue: #6ea8fe;
    --ase-amber: #e0a04b;
    --ase-green: #77c991;
    --ase-gradient: linear-gradient(180deg, #7db1ff 0%, #5f98ed 100%);
}

html,
body {
    background: var(--surface-canvas) !important;
    color: var(--text-body);
}

body {
    font-size: 14px;
}

/* Primary layout: canvas -> navigation -> content. */
.app-container,
.page,
#main-page,
.chats-split-view,
.chat-page,
.deploy-page {
    background: var(--surface-canvas) !important;
}

.sidebar,
.sc-sidebar,
.chat-sidebar {
    background: var(--surface-sidebar) !important;
    border-color: var(--line-default) !important;
    box-shadow: inset -1px 0 0 var(--line-soft) !important;
}

.main-content,
.sc-main,
.chat-main,
.sc-welcome,
.sc-detail,
.sc-feed,
.chat-feed {
    background: var(--surface-main) !important;
}

html[data-theme] .chats-split-view .sc-main {
    background: var(--surface-main) !important;
}

.main-content {
    padding: clamp(18px, 2.6vw, 34px);
}

.view-header {
    margin-bottom: 22px;
}

.view-header h2,
.commerce-page-title,
.deploy-page-title,
.profile-section-title,
.config-section-title,
.sc-welcome-title,
.sc-detail-topbar-title {
    color: var(--text-heading) !important;
    font-weight: 650 !important;
    letter-spacing: -0.025em;
}

.view-header h2,
.commerce-page-title,
.deploy-page-title {
    font-size: clamp(21px, 2.2vw, 27px);
}

.profile-section-subtitle,
.config-section-subtitle,
.sc-welcome-sub,
.sc-detail-hint,
.sc-detail-hint-inline,
.form-hint,
.profile-preferences-tip,
.store-product-desc,
.profile-action-desc {
    color: var(--text-subtle) !important;
}

/* Elevated surfaces and functional modules. */
.table-container,
.apps-card-container,
.todo-container,
.config-section,
.wizard-body,
.profile-user-card,
.profile-section,
.profile-action-card,
.profile-service-card,
.service-card,
.store-product-card,
.okr-objective-block,
.commerce-panel,
.commerce-card,
.commerce-table-wrap,
.resource-card,
.model-card,
.modal,
.modal-container,
.md-preview-card,
.sc-mr-modal-card,
.mr-modal-card,
.agent-asset-paste-modal-card,
.deploy-table-wrap,
.detail-modal,
.publish-modal,
.support-feedback-hero,
.support-chat-box,
.app-card {
    background: var(--surface-panel) !important;
    border: 1px solid var(--line-default) !important;
    box-shadow: var(--elevation-1) !important;
    color: var(--text-body);
}

.profile-section,
.config-section,
.commerce-panel,
.support-feedback-hero {
    padding: clamp(18px, 2.2vw, 26px);
    border-radius: 16px;
}

.profile-user-card,
.profile-action-card,
.service-card,
.store-product-card,
.app-card,
.resource-card,
.model-card {
    border-radius: 14px !important;
}

.profile-action-card:hover,
.store-product-card:hover,
.app-card:hover,
.resource-card:hover,
.model-card:hover {
    background: var(--surface-panel-strong) !important;
    border-color: var(--line-strong) !important;
    box-shadow: var(--elevation-2) !important;
    transform: translateY(-1px);
}

.profile-action-icon,
.app-card-thumbnail-shell,
.app-card-preview-default-icon,
.store-product-icon,
.empty-icon,
.profile-user-avatar-wrap {
    background: var(--surface-panel-muted) !important;
    border-color: var(--line-soft) !important;
    color: var(--accent-primary) !important;
}

.app-card-preview {
    background: var(--surface-panel-muted) !important;
    border-color: var(--line-default) !important;
}

.app-social-btn,
.app-card-actions .btn-action,
.wechat-key-toggle {
    background: var(--surface-panel-muted) !important;
    border-color: var(--line-default) !important;
    color: var(--text-subtle) !important;
}

.app-social-btn:hover,
.app-social-btn.active,
.app-card-actions .btn-action:hover,
.wechat-key-toggle:hover {
    background: var(--surface-hover) !important;
    border-color: var(--line-strong) !important;
    color: var(--text-heading) !important;
}

.app-visibility-badge.is-public {
    background: color-mix(in srgb, var(--accent-success) 14%, var(--surface-panel)) !important;
    border-color: color-mix(in srgb, var(--accent-success) 34%, var(--line-default)) !important;
    color: var(--accent-success) !important;
}

/* 已公开但尚未成功发布生产：与「公开」区分开，提示还没真正对外展示 */
.app-visibility-badge.is-pending-public {
    background: color-mix(in srgb, var(--accent-warning) 14%, var(--surface-panel)) !important;
    border-color: color-mix(in srgb, var(--accent-warning) 34%, var(--line-default)) !important;
    color: var(--accent-warning) !important;
}

.profile-user-name,
.profile-action-title,
.service-card-title,
.store-product-title,
.app-card-name,
.app-card-value,
.commerce-card-title,
.support-feedback-title {
    color: var(--text-heading) !important;
    font-weight: 620;
}

/* Navigation needs a separate active plane, not just a text-color change. */
.sidebar-header,
.sidebar-footer,
.sidebar-recent-chats,
.sc-sidebar-header,
.chat-sidebar .sidebar-header {
    border-color: var(--line-soft) !important;
}

.sidebar-header .logo-text,
.sc-sidebar-title,
.sidebar-chat-title {
    color: var(--text-heading) !important;
    font-weight: 650;
}

.nav-item,
.sidebar-recent-item,
.sidebar-feedback-btn,
.sc-chat-item,
.chat-list-item {
    color: var(--text-subtle) !important;
    border: 1px solid transparent !important;
}

.nav-item:hover,
.sidebar-recent-item:hover,
.sidebar-feedback-btn:hover,
.sc-chat-item:hover,
.chat-list-item:hover {
    color: var(--text-heading) !important;
    background: var(--surface-hover) !important;
    border-color: var(--line-soft) !important;
}

.nav-item.active,
.sidebar-recent-item.active,
.sidebar-feedback-btn.active,
.sc-chat-item.active,
.chat-list-item.active {
    color: var(--text-heading) !important;
    background: var(--surface-panel) !important;
    border-color: var(--line-default) !important;
    box-shadow: var(--elevation-1) !important;
    font-weight: 620;
}

.sidebar-user-panel,
.sidebar-recent-load-more-btn,
.btn-logout,
.new-chat-btn,
.sidebar-action-btn,
.gitpush-card {
    background: var(--surface-panel) !important;
    color: var(--text-body) !important;
    border-color: var(--line-default) !important;
    box-shadow: var(--elevation-1) !important;
}

/* Forms and inputs form an inset plane inside cards. */
.form-group label,
.profile-preferences-field label,
.commerce-label,
.publish-modal-body label,
.deploy-filter-item label {
    color: var(--text-body) !important;
    font-weight: 600;
}

.form-group input,
.form-input,
.search-input,
.commerce-input,
.modal-content select,
.profile-preferences-field select,
.agent-asset-paste-field input,
.agent-asset-paste-field select,
.agent-asset-paste-field textarea,
input[type="text"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="email"],
select,
textarea {
    background: var(--surface-inset) !important;
    border: 1px solid var(--line-default) !important;
    color: var(--text-heading) !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.04);
}

input::placeholder,
textarea::placeholder,
.form-input::placeholder,
.search-input::placeholder {
    color: var(--text-faint) !important;
    opacity: 1;
}

.form-group input:focus,
.form-input:focus,
.search-input:focus,
.commerce-input:focus,
.modal-content select:focus,
.profile-preferences-field select:focus,
input:focus,
select:focus,
textarea:focus {
    background: var(--surface-panel-strong) !important;
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 3px var(--focus-ring) !important;
    outline: none;
}

select option {
    background: var(--surface-panel) !important;
    color: var(--text-heading) !important;
}

/* Buttons and segmented controls. */
.btn-primary,
.sc-send-btn,
.sc-detail-send-btn,
.sc-new-btn,
.store-redeem-btn,
.commerce-add-product-btn,
.okr-add-btn,
.btn-publish-prod,
.publish-modal-footer .primary {
    background: var(--accent-primary) !important;
    border-color: transparent !important;
    color: var(--text-on-accent) !important;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--accent-primary) 26%, transparent) !important;
    font-weight: 620;
}

.btn-primary:hover,
.sc-send-btn:hover,
.sc-detail-send-btn:hover,
.sc-new-btn:hover,
.btn-publish-prod:hover {
    filter: brightness(1.07);
    box-shadow: 0 5px 16px color-mix(in srgb, var(--accent-primary) 32%, transparent) !important;
}

.btn-secondary,
.btn-back,
.btn-action,
.filter-btn,
.sc-attach-btn,
.sc-detail-merge-btn,
.sc-support-ticket-btn,
.commerce-btn-upload,
.wizard-env-tab,
.wizard-sidebar-tab,
.apps-tab-btn,
.deploy-pagination button,
.publish-modal-footer button,
.detail-modal-close {
    background: var(--surface-panel-muted) !important;
    border-color: var(--line-default) !important;
    color: var(--text-subtle) !important;
}

.btn-secondary:hover,
.btn-back:hover,
.btn-action:hover,
.filter-btn:hover,
.sc-attach-btn:hover,
.sc-detail-merge-btn:hover,
.sc-support-ticket-btn:hover,
.commerce-btn-upload:hover,
.wizard-env-tab:hover,
.wizard-sidebar-tab:hover,
.apps-tab-btn:hover,
.deploy-pagination button:hover {
    background: var(--surface-hover) !important;
    border-color: var(--line-strong) !important;
    color: var(--text-heading) !important;
}

.apps-tab-btn.active,
.wizard-sidebar-tab.active,
.wizard-env-tab.active,
.sidebar-recent-tab.active,
.filter-btn.checked,
.filter-btn:has(input:checked) {
    background: color-mix(in srgb, var(--accent-primary) 14%, var(--surface-panel)) !important;
    border-color: color-mix(in srgb, var(--accent-primary) 42%, var(--line-default)) !important;
    color: var(--accent-primary) !important;
    font-weight: 620;
}

button:disabled,
.btn-primary:disabled,
.btn-secondary:disabled {
    opacity: 0.48;
    filter: saturate(0.5);
    cursor: not-allowed;
    box-shadow: none !important;
}

/* Tables: header, row and hover each occupy a distinct plane. */
.data-table,
.deploy-table,
.commerce-table {
    color: var(--text-body) !important;
}

.data-table th,
.deploy-table th,
.commerce-table th {
    background: var(--surface-panel-muted) !important;
    border-color: var(--line-default) !important;
    color: var(--text-subtle) !important;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0.025em;
}

.data-table td,
.deploy-table td,
.commerce-table td {
    border-color: var(--line-soft) !important;
    color: var(--text-body) !important;
}

.data-table tbody tr:nth-child(even),
.deploy-table tbody tr:nth-child(even),
.commerce-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--surface-panel-muted) 55%, transparent) !important;
}

.data-table tbody tr:hover,
.deploy-table tbody tr:hover,
.commerce-table tbody tr:hover {
    background: var(--surface-hover) !important;
}

/* Modal and feedback planes. */
.modal-overlay,
.detail-modal-overlay,
.store-convert-overlay,
.sc-image-preview-modal,
.md-preview-modal {
    background: var(--surface-overlay) !important;
    backdrop-filter: blur(8px);
}

.modal,
.modal-container,
.md-preview-card,
.sc-mr-modal-card,
.mr-modal-card,
.agent-asset-paste-modal-card,
.detail-modal,
.publish-modal {
    box-shadow: var(--elevation-3) !important;
}

.modal-header,
.modal-footer,
.md-preview-header,
.sc-mr-modal-head,
.detail-modal-header,
.publish-modal-footer {
    background: var(--surface-panel-muted) !important;
    border-color: var(--line-default) !important;
    color: var(--text-heading) !important;
}

.modal-close,
.md-preview-close,
.sc-image-preview-close {
    color: var(--text-subtle) !important;
}

.toast,
.chat-toast {
    background: var(--surface-panel-strong) !important;
    border: 1px solid var(--line-strong) !important;
    box-shadow: var(--elevation-2) !important;
    color: var(--text-heading) !important;
}

/* Login: retain the Manus restraint while separating brand and form planes. */
.auth-layout {
    background: var(--surface-canvas) !important;
    --ase-bg: var(--surface-canvas);
    --ase-bg-soft: var(--surface-sidebar);
    --ase-panel: var(--surface-panel);
    --ase-panel-soft: var(--surface-panel-muted);
    --ase-line: var(--line-default);
}

.auth-brand {
    background: var(--surface-sidebar) !important;
    border-color: var(--line-default) !important;
    color: var(--text-body) !important;
}

.auth-panel {
    background: var(--surface-main) !important;
}

.auth-card,
.brand-features li {
    background: var(--surface-panel) !important;
    border-color: var(--line-default) !important;
    box-shadow: var(--elevation-2) !important;
}

.brand-headline,
.brand-logo-text strong,
.brand-features li strong,
.auth-card-brand strong {
    color: var(--text-heading) !important;
}

.brand-sub,
.brand-kicker,
.brand-logo-text em,
.brand-features li span:not(.brand-feature-icon),
.auth-card-brand span,
.tagline {
    color: var(--text-subtle) !important;
}

.auth-tabs {
    background: var(--surface-inset) !important;
    border-color: var(--line-soft) !important;
}

.tab-btn {
    color: var(--text-subtle) !important;
}

.tab-btn.active {
    background: var(--surface-panel-strong) !important;
    border-color: var(--line-default) !important;
    color: var(--text-heading) !important;
    box-shadow: var(--elevation-1) !important;
}

html[data-theme="dark"] .logo-icon,
html[data-theme="dark"] .auth-trademark-image,
html[data-theme="dark"] .logo-trademark {
    filter: brightness(0) invert(1) opacity(0.92);
}

/* Chat and Markdown: user input, agent output and tools remain distinguishable. */
.sc-detail-topbar,
.chat-topbar,
.chat-mobile-bar {
    background: color-mix(in srgb, var(--surface-main) 94%, transparent) !important;
    border-color: var(--line-default) !important;
    box-shadow: 0 1px 0 var(--line-soft) !important;
    backdrop-filter: blur(14px);
}

.sc-msg-user-row,
.msg-user-row {
    background: var(--surface-user-message) !important;
    border-bottom: 1px solid var(--line-soft) !important;
}

.sc-msg-agent-row,
.msg-agent-row {
    background: var(--surface-agent-message) !important;
}

.sc-msg-role,
.msg-role {
    color: var(--text-subtle) !important;
    font-weight: 650 !important;
}

.sc-msg-avatar,
.msg-avatar,
.msg-avatar.agent-avatar {
    background: var(--surface-panel-muted) !important;
    border-color: var(--line-default) !important;
    color: var(--text-subtle) !important;
    box-shadow: inset 0 0 0 1px var(--line-soft) !important;
}

.sc-msg-avatar.user,
.msg-avatar.user-avatar {
    background: color-mix(in srgb, var(--accent-primary) 14%, var(--surface-panel)) !important;
    border-color: color-mix(in srgb, var(--accent-primary) 28%, var(--line-default)) !important;
    color: var(--accent-primary) !important;
}

.sc-msg-id,
.sc-msg-time,
.msg-id,
.msg-time {
    color: var(--text-faint) !important;
}

.sc-msg-text,
.sc-msg-output,
.msg-text,
.msg-output,
.md-preview-body {
    color: var(--text-body) !important;
}

.sc-msg-output h1,
.sc-msg-output h2,
.sc-msg-output h3,
.sc-msg-output h4,
.sc-msg-output h5,
.sc-msg-output h6,
.msg-output h1,
.msg-output h2,
.msg-output h3,
.msg-output h4,
.msg-output h5,
.msg-output h6,
.md-preview-body h1,
.md-preview-body h2,
.md-preview-body h3 {
    color: var(--text-heading) !important;
}

.sc-msg-output strong,
.msg-output strong {
    color: var(--text-heading) !important;
}

.sc-msg-output blockquote,
.msg-output blockquote,
.md-preview-body blockquote {
    color: var(--text-subtle) !important;
    background: var(--surface-panel-muted) !important;
    border-left-color: var(--line-strong) !important;
}

.sc-msg-output code,
.msg-output code,
.md-preview-body code {
    color: var(--text-body) !important;
    background: var(--surface-inset) !important;
}

.sc-msg-output pre,
.msg-output pre,
.md-preview-body pre,
.detail-modal-body pre {
    background: var(--surface-inset) !important;
    border-color: var(--line-default) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.10) !important;
}

.sc-msg-output pre code,
.sc-msg-output pre code.hljs,
.msg-output pre code,
.msg-output pre code.hljs,
.md-preview-body pre code {
    color: var(--text-body) !important;
    background: transparent !important;
}

.sc-msg-output pre .code-lang-label,
.msg-output pre .code-lang-label {
    color: var(--text-subtle) !important;
    background: var(--surface-panel-muted) !important;
}

.sc-msg-output table,
.msg-output table,
.md-preview-body table,
.sc-msg-output th,
.sc-msg-output td,
.msg-output th,
.msg-output td,
.md-preview-body th,
.md-preview-body td {
    border-color: var(--line-default) !important;
}

.sc-msg-output th,
.msg-output th,
.md-preview-body th {
    color: var(--text-heading) !important;
    background: var(--surface-panel-muted) !important;
}

.sc-msg-output tr:nth-child(even),
.msg-output tr:nth-child(even) {
    background: color-mix(in srgb, var(--surface-panel-muted) 60%, transparent) !important;
}

.sc-detail-composer,
.chat-input-area {
    background: linear-gradient(to bottom, transparent, var(--surface-main) 24%) !important;
}

.sc-composer-box,
.sc-detail-composer-box,
.chat-input-container,
.input-container,
.welcome-input-container {
    background: var(--surface-panel-strong) !important;
    border-color: var(--line-strong) !important;
    box-shadow: var(--elevation-2) !important;
}

.sc-composer-box:focus-within,
.sc-detail-composer-box:focus-within,
.chat-input-container:focus-within,
.input-container:focus-within {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 3px var(--focus-ring), var(--elevation-2) !important;
}

.ui-card,
.ui-card-content,
.msg-tool-card,
.sc-msg-tool-card,
.running-animation-card {
    background: var(--surface-panel) !important;
    border-color: var(--line-default) !important;
    color: var(--text-body) !important;
    box-shadow: var(--elevation-1) !important;
}

/* App configuration wizard has an outer navigation plane and inner sections. */
.wizard-layout {
    background: var(--surface-main) !important;
}

.wizard-sidebar {
    background: var(--surface-sidebar) !important;
    border-color: var(--line-default) !important;
}

.wizard-body {
    background: var(--surface-main) !important;
}

.config-section + .config-section {
    margin-top: 18px;
}

.config-section-toolbar,
.wizard-header,
.wizard-footer {
    border-color: var(--line-soft) !important;
}

.env-var-row,
.agent-asset-item,
.profile-services-list > *,
.support-message {
    background: var(--surface-panel-muted) !important;
    border-color: var(--line-default) !important;
}

/* Status colors use tinted surfaces so labels remain readable in both modes. */
.message.success,
.status-success,
.status-paid,
.service-expire-permanent {
    background: color-mix(in srgb, var(--accent-success) 15%, var(--surface-panel)) !important;
    border-color: color-mix(in srgb, var(--accent-success) 36%, var(--line-default)) !important;
    color: var(--accent-success) !important;
}

.message.error,
.status-failed,
.status-refunded,
.service-expire-urgent {
    background: color-mix(in srgb, var(--accent-danger) 14%, var(--surface-panel)) !important;
    border-color: color-mix(in srgb, var(--accent-danger) 36%, var(--line-default)) !important;
    color: var(--accent-danger) !important;
}

.status-pending,
.status-publishing,
.service-expire-normal {
    background: color-mix(in srgb, var(--accent-warning) 14%, var(--surface-panel)) !important;
    border-color: color-mix(in srgb, var(--accent-warning) 34%, var(--line-default)) !important;
    color: var(--accent-warning) !important;
}

.sc-msg-extra-btn.deploy-badge,
.msg-extra-btn.deploy-badge,
.msg-output-badge,
.mention-source,
.app-publish-btn {
    border: 1px solid var(--line-default) !important;
    background: var(--surface-panel-muted) !important;
    color: var(--text-subtle) !important;
}

.sc-msg-extra-btn.deploy-badge-pending,
.msg-extra-btn.deploy-badge-pending,
.mention-source.is-output,
.msg-output-link,
.app-publish-btn.app-publish-preview {
    background: color-mix(in srgb, var(--accent-warning) 13%, var(--surface-panel)) !important;
    border-color: color-mix(in srgb, var(--accent-warning) 34%, var(--line-default)) !important;
    color: var(--accent-warning) !important;
}

.sc-msg-extra-btn.deploy-badge-publishing,
.msg-extra-btn.deploy-badge-publishing,
.mention-source.is-upload {
    background: color-mix(in srgb, var(--accent-primary) 13%, var(--surface-panel)) !important;
    border-color: color-mix(in srgb, var(--accent-primary) 34%, var(--line-default)) !important;
    color: var(--accent-primary) !important;
}

.sc-msg-extra-btn.deploy-badge-success,
.msg-extra-btn.deploy-badge-success,
.msg-output-badge.is-ready,
.app-publish-btn.app-publish-deploy {
    background: color-mix(in srgb, var(--accent-success) 13%, var(--surface-panel)) !important;
    border-color: color-mix(in srgb, var(--accent-success) 34%, var(--line-default)) !important;
    color: var(--accent-success) !important;
}

.sc-msg-extra-btn.deploy-badge-failed,
.msg-extra-btn.deploy-badge-failed,
.msg-output-link.is-output-failed,
.msg-output-badge.is-failed {
    background: color-mix(in srgb, var(--accent-danger) 13%, var(--surface-panel)) !important;
    border-color: color-mix(in srgb, var(--accent-danger) 34%, var(--line-default)) !important;
    color: var(--accent-danger) !important;
}

.sc-msg-extra-btn.deploy-badge-cancel,
.msg-extra-btn.deploy-badge-cancel,
.msg-output-link.is-output-uploading {
    background: var(--surface-panel-muted) !important;
    border-color: var(--line-default) !important;
    color: var(--text-faint) !important;
}

.mention-source.is-app {
    background: color-mix(in srgb, var(--accent-purple) 13%, var(--surface-panel)) !important;
    border-color: color-mix(in srgb, var(--accent-purple) 34%, var(--line-default)) !important;
    color: var(--accent-purple) !important;
}

#deploy-preview-warnings {
    background: color-mix(in srgb, var(--accent-warning) 12%, var(--surface-panel)) !important;
    border-color: color-mix(in srgb, var(--accent-warning) 34%, var(--line-default)) !important;
    color: var(--accent-warning) !important;
}

.app-card-id,
.app-visibility-badge.is-private,
.sc-detail-topbar-badge,
.type-tag,
.order-status-badge {
    background: var(--surface-panel-muted) !important;
    border-color: var(--line-soft) !important;
    color: var(--text-subtle) !important;
}

/* Profile theme picker. */
.profile-theme-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.profile-theme-option {
    position: relative;
    display: block;
    min-width: 0;
    cursor: pointer;
}

.profile-theme-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.profile-theme-option-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    min-height: 104px;
    padding: 14px;
    border: 1px solid var(--line-default);
    border-radius: 14px;
    background: var(--surface-panel-muted);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.profile-theme-option:hover .profile-theme-option-card {
    border-color: var(--line-strong);
    box-shadow: var(--elevation-1);
    transform: translateY(-1px);
}

.profile-theme-option input:focus-visible + .profile-theme-option-card {
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.profile-theme-option input:checked + .profile-theme-option-card {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px var(--focus-ring), var(--elevation-1);
    background: color-mix(in srgb, var(--accent-primary) 7%, var(--surface-panel));
}

.profile-theme-preview {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 6px;
    height: 76px;
    padding: 7px;
    overflow: hidden;
    border: 1px solid rgba(31, 31, 28, 0.16);
    border-radius: 9px;
}

.profile-theme-preview-sidebar {
    border-radius: 5px;
}

.profile-theme-preview-main {
    display: grid;
    gap: 5px;
    align-content: start;
    padding: 5px;
    border-radius: 5px;
}

.profile-theme-preview-main::before,
.profile-theme-preview-main::after {
    content: "";
    display: block;
    height: 13px;
    border-radius: 4px;
}

.profile-theme-preview-main::after {
    width: 72%;
}

.profile-theme-preview.warm {
    background: #ebe7df;
}

.profile-theme-preview.warm .profile-theme-preview-sidebar {
    background: #d9d3c8;
}

.profile-theme-preview.warm .profile-theme-preview-main {
    background: #f3efe8;
}

.profile-theme-preview.warm .profile-theme-preview-main::before,
.profile-theme-preview.warm .profile-theme-preview-main::after {
    background: #fffdf8;
    border: 1px solid rgba(48, 43, 36, 0.12);
}

.profile-theme-preview.dark {
    background: #080a0c;
    border-color: rgba(229, 235, 240, 0.18);
}

.profile-theme-preview.dark .profile-theme-preview-sidebar {
    background: #161a1d;
}

.profile-theme-preview.dark .profile-theme-preview-main {
    background: #0c0f11;
}

.profile-theme-preview.dark .profile-theme-preview-main::before,
.profile-theme-preview.dark .profile-theme-preview-main::after {
    background: #20262a;
    border: 1px solid rgba(229, 235, 240, 0.14);
}

.profile-theme-option-copy {
    min-width: 0;
}

.profile-theme-option-title {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-heading);
    font-size: 15px;
    font-weight: 650;
}

.profile-theme-option-title::before {
    content: "";
    width: 9px;
    height: 9px;
    border: 2px solid var(--line-strong);
    border-radius: 50%;
}

.profile-theme-option input:checked + .profile-theme-option-card .profile-theme-option-title::before {
    border-color: var(--accent-primary);
    background: var(--accent-primary);
    box-shadow: inset 0 0 0 2px var(--surface-panel);
}

.profile-theme-option-desc {
    margin-top: 6px;
    color: var(--text-subtle);
    font-size: 12px;
    line-height: 1.55;
}

.profile-theme-save-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
}

.profile-theme-save-status {
    color: var(--text-subtle);
    font-size: 12px;
}

@media (max-width: 760px) {
    .main-content {
        padding: 16px 12px;
    }

    .profile-theme-options {
        grid-template-columns: 1fr;
    }

    .profile-theme-option-card {
        grid-template-columns: 96px minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .profile-theme-option-card,
    .profile-action-card,
    .store-product-card,
    .app-card,
    .resource-card,
    .model-card {
        transition: none !important;
        transform: none !important;
    }
}