@media (max-width: 767px) {
/* Warm workspace colors apply only at the existing phone breakpoint. */
body.style-default {
    --workspace-page: #f7f6f2;
    --workspace-surface: #fff;
    --workspace-ink: #20252b;
    --workspace-muted: #777975;
    --workspace-border: #e3e3dc;
    --workspace-accent: #c6493f;
    --workspace-accent-fill: #c6493f;
    --workspace-tint: #f8eeeb;
    background-color: var(--workspace-page);
    color: var(--workspace-ink);
}
body.style-default.theme-dark {
    --workspace-page: #191c20;
    --workspace-surface: #24282d;
    --workspace-ink: #edece7;
    --workspace-muted: #a4a59f;
    --workspace-border: #363b40;
    --workspace-accent: #e37b70;
    --workspace-accent-fill: #bc4940;
    --workspace-tint: #352724;
    --dark-bg: var(--workspace-page);
    --dark-app-bg: var(--workspace-page);
    --dark-sidebar: var(--workspace-surface);
    --dark-surface: var(--workspace-surface);
    --dark-border: var(--workspace-border);
    --dark-border-soft: var(--workspace-border);
    --dark-text: var(--workspace-ink);
    --dark-text-2: var(--workspace-ink);
    --dark-muted: var(--workspace-muted);
}

/* Neutral app surfaces; source paper images and print canvases remain paper white. */
body.style-default main > .overflow-y-auto.bg-slate-50,
body.style-default .st-sidebar,
body.style-default :is(.bg-slate-50, .bg-gray-50, .bg-slate-100, .bg-gray-100):not(.virtual-paper) {
    background-color: var(--workspace-page) !important;
}
body.style-default :is(.bg-white, .glass-surface, .question-card, .question-search-suggestions, .theme-picker-menu):not(.virtual-paper):not(.auth-turnstile-box),
body.style-default #appTopHeader,
body.style-default #randomModalContent,
body.style-default #exportModalContent {
    background-color: var(--workspace-surface) !important;
    border-color: var(--workspace-border) !important;
}
body.style-default :is(.border-slate-100, .border-slate-200, .border-slate-300, .border-gray-200, .border-gray-300) {
    border-color: var(--workspace-border) !important;
}
body.style-default :is(.text-gray-900, .text-gray-800, .text-gray-700, .text-slate-900, .text-slate-800, .text-slate-700, .question-search-label) {
    color: var(--workspace-ink) !important;
}
body.style-default :is(.text-gray-600, .text-gray-500, .text-gray-400, .text-slate-600, .text-slate-500, .text-slate-400, .question-search-help, .question-math-keyboard-button) {
    color: var(--workspace-muted) !important;
}
body.style-default :is(.text-st-red, .st-red, .theme-picker-check) { color: var(--workspace-accent) !important; }
body.style-default .bg-st-red { background-color: var(--workspace-accent-fill) !important; }
body.style-default .border-st-red { border-color: var(--workspace-accent) !important; }
body.style-default .accent-st-red { accent-color: var(--workspace-accent); }
body.style-default [class~="hover:text-st-red"]:hover { color: var(--workspace-accent) !important; }
body.style-default :is([class~="hover:bg-gray-50"], [class~="hover:bg-slate-50"], [class~="hover:bg-slate-100"]):hover { background-color: var(--workspace-page) !important; }
body.style-default :is([class~="bg-st-red/10"], [class~="bg-st-red/5"]) { background-color: var(--workspace-tint) !important; }
body.style-default :is([class~="focus:ring-st-red/20"], [class~="focus:ring-st-red/30"], [class~="focus:ring-st-red/50"]):focus { --tw-ring-color: color-mix(in srgb, var(--workspace-accent) 25%, transparent); }

body.style-default :is(.question-search-input, .question-card-meta, .question-card-er, .question-card-er summary) {
    background: var(--workspace-page) !important;
    border-color: var(--workspace-border) !important;
    color: var(--workspace-ink);
}
body.style-default .question-search-option { color: var(--workspace-ink); border-color: var(--workspace-border); }
body.style-default :is(.question-search-input:focus, .question-search-input:focus-within, .capybara-textarea:focus) {
    border-color: var(--workspace-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--workspace-accent) 10%, transparent) !important;
}
body.style-default .question-math-field {
    --caret-color: var(--workspace-accent);
    --selection-background-color: var(--workspace-tint);
    --contains-highlight-background-color: var(--workspace-tint);
}
body.style-default .question-math-keyboard-button:hover { color: var(--workspace-accent); background: var(--workspace-tint); }
body.style-default .question-math-keyboard-button:focus-visible { outline-color: var(--workspace-accent); }
body.style-default :is(.sidebar-drawer-handle, .subscription-pay-btn):not(:disabled) {
    background: var(--workspace-accent-fill);
    border-color: var(--workspace-accent-fill);
    color: #fff;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--workspace-accent-fill) 18%, transparent);
}
body.style-default :is(.sidebar-drawer-handle, .subscription-pay-btn):hover:not(:disabled) { filter: brightness(.94); }
body.style-default :is(.theme-toggle-btn, .style-toggle-btn, .pwa-install-btn, .capybara-close-btn) {
    background: var(--workspace-surface);
    border-color: var(--workspace-border);
    color: var(--workspace-muted);
}
body.style-default .style-toggle-swatch { background: linear-gradient(135deg, #f7f6f2 48%, #c6493f 48%); }

/* Study assistant uses the same surfaces while keeping semantic prompt colors. */
body.style-default :is(.capybara-drawer, .capybara-drawer-header, .capybara-input-area, .capybara-question-meta, .capybara-message.assistant, .capybara-textarea) {
    background: var(--workspace-surface) !important;
    border-color: var(--workspace-border) !important;
    color: var(--workspace-ink);
}
body.style-default :is(.capybara-chat-body, .capybara-tabs) { background: var(--workspace-page); border-color: var(--workspace-border); }
body.style-default .capybara-drawer-title { color: var(--workspace-ink); }
body.style-default .capybara-tab { color: var(--workspace-muted); }
body.style-default :is(.capybara-tab.active, .capybara-message.user, .capybara-quota-hint:not(.is-empty), .subscription-region-btn.is-active) {
    background: var(--workspace-tint);
    color: var(--workspace-accent);
    border-color: color-mix(in srgb, var(--workspace-accent) 25%, var(--workspace-border));
    box-shadow: none;
}
body.style-default .capybara-send-primary:not(:disabled) { background: var(--workspace-accent-fill); border-color: var(--workspace-accent-fill); color: #fff; }

/* Shared account dialogs use the login card palette on phones. */
body.style-default #accountModalContent :is(.account-shell, .account-main, .account-card, .account-card-head),
body.style-default :is(.subscription-checkout-panel, .subscription-method-card, .subscription-region-btn) {
    background: var(--workspace-surface) !important;
    border-color: var(--workspace-border) !important;
    color: var(--workspace-ink);
}
body.style-default #accountModalContent .account-sidebar,
body.style-default .subscription-summary-card {
    background: var(--workspace-page) !important;
    border-color: var(--workspace-border) !important;
}
body.style-default #accountModalContent .account-field input {
    background: var(--workspace-page) !important;
    border-color: var(--workspace-border) !important;
    color: var(--workspace-ink) !important;
}

/* Append after app.css. Only the default mobile appearance uses workspace colors. */
@media (max-width: 767px) {
    body.style-default :is(.mobile-study-app, .mobile-sheet-panel) {
        background: var(--workspace-page) !important;
        color: var(--workspace-ink) !important;
    }
    body.style-default :is(.mobile-study-topbar, .mobile-bottom-nav, .mobile-sheet-header,
        .mobile-question-card, .mobile-question-meta, .mobile-menu-card, .mobile-filter-group,
        .mobile-cart-summary, .mobile-cart-item:not(.is-dragging), .mobile-paper-row, .mobile-account-card,
        .mobile-generate-modal, .mobile-answer-drawer, .mobile-answer-head, .mobile-question-toolbar) {
        background: var(--workspace-surface) !important;
        border-color: var(--workspace-border) !important;
    }
    body.style-default :is(.mobile-study-empty, .mobile-study-loading) {
        background: var(--workspace-surface);
        border-color: var(--workspace-border);
        color: var(--workspace-muted);
    }
    body.style-default :is(.mobile-study-title, .mobile-question-id, .mobile-filter-title,
        .mobile-menu-card strong, .mobile-cart-summary strong, .mobile-cart-id,
        .mobile-paper-title, .mobile-account-id strong, .mobile-account-row-label,
        .mobile-sheet-header h2, .mobile-answer-head h2) {
        color: var(--workspace-ink) !important;
    }
    body.style-default :is(.mobile-study-subtitle, .mobile-question-chapter,
        .mobile-icon-btn small, .mobile-menu-card span, .mobile-cart-summary span,
        .mobile-cart-chapter, .mobile-cart-drag-handle, .mobile-paper-meta,
        .mobile-account-id span, .mobile-account-group-title,
        .mobile-account-row-value, .mobile-account-row-chevron) {
        color: var(--workspace-muted) !important;
    }
    body.style-default :is(.mobile-topbar-action, .mobile-topbar-filter, .mobile-icon-btn,
        .mobile-sheet-close, .mobile-answer-close, .mobile-generate-close):not(:disabled),
    body.style-default .mobile-filter-chip:not(.is-selected):not(:disabled),
    body.style-default .mobile-action-btn:not(.primary):not(.dark):not(.preview-exit):not(:disabled),
    body.style-default .mobile-field:not(:disabled) {
        background: var(--workspace-surface) !important;
        border-color: var(--workspace-border) !important;
        color: var(--workspace-ink) !important;
    }
    body.style-default .mobile-sheet-tabs {
        background: var(--workspace-page);
        border-color: var(--workspace-border);
    }
    body.style-default .mobile-bottom-nav button:not(.is-active):not(.has-filter),
    body.style-default .mobile-sheet-tab:not(.is-active) { color: var(--workspace-muted); }
    body.style-default :is(.mobile-bottom-nav button.is-active, .mobile-bottom-nav button.has-filter,
        .mobile-sheet-tab.is-active, .mobile-topbar-filter.has-filter,
        .mobile-filter-chip.is-selected, .mobile-action-btn.primary,
        .mobile-action-btn.preview-exit, .mobile-cart-icon-btn):not(:disabled) {
        background: var(--workspace-tint) !important;
        border-color: var(--workspace-accent) !important;
        color: var(--workspace-accent) !important;
    }
    body.style-default .mobile-sheet-tab.is-active {
        box-shadow: inset 0 0 0 1px var(--workspace-border);
    }
    body.style-default :is(.mobile-question-marks, .mobile-sheet-eyebrow, .mobile-answer-eyebrow) {
        color: var(--workspace-accent) !important;
    }
    body.style-default .mobile-question-marks { background: var(--workspace-tint) !important; }
    body.style-default .mobile-action-btn.dark:not(:disabled) {
        background: var(--workspace-accent-fill) !important;
        border-color: var(--workspace-accent-fill) !important;
        color: #fff !important;
    }
    body.style-default .mobile-account-page .mobile-account-avatar {
        background-color: var(--workspace-accent-fill);
        color: #fff;
    }
    body.style-default .mobile-account-page .mobile-account-toggle {
        background-color: var(--workspace-border);
    }
    body.style-default .mobile-account-page .mobile-account-toggle.is-on {
        background-color: var(--workspace-accent-fill);
    }
    body.style-default .mobile-account-rows .mobile-account-row + .mobile-account-row {
        border-color: var(--workspace-border);
    }
    body.style-default .mobile-account-row:active,
    body.style-default .mobile-sheet-overlay[data-variant="bottom"] .mobile-menu-list-compact .mobile-menu-card:active {
        background: var(--workspace-tint) !important;
    }
    body.style-default .mobile-generate-status:not(.is-error) {
        background: var(--workspace-page);
        border-color: var(--workspace-border);
        color: var(--workspace-muted);
    }
    body.style-default .mobile-sticky-actions {
        background: linear-gradient(180deg, transparent, var(--workspace-page) 30%);
    }
    body.style-default #accountModal.account-mobile-detail {
        --account-page: var(--workspace-page);
        --account-surface: var(--workspace-surface);
        --account-ink: var(--workspace-ink);
        --account-muted: var(--workspace-muted);
        --account-line: var(--workspace-border);
        --account-tint: var(--workspace-tint);
        --account-accent: var(--workspace-accent);
    }
    body.style-default #accountModal.account-mobile-detail .account-security-body button:not(:disabled),
    body.style-default #accountModal.account-mobile-detail .mobile-sub-plan-row[data-featured="true"] .mobile-sub-plan-action:not(:disabled) {
        background: var(--workspace-accent-fill);
        border-color: var(--workspace-accent-fill);
        color: #fff;
    }
}

body.style-default .subscription-region-btn.is-active { background: var(--workspace-tint) !important; border-color: var(--workspace-accent) !important; }

body.style-default.theme-dark .capybara-drawer .capybara-textarea:focus { border-color: var(--workspace-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--workspace-accent) 10%, transparent) !important; }

}