:root {
    --primary: #aca6dd;
    --primary-rgb: 172, 166, 221;
    --secondary: #afd1fd;
    --secondary-rgb: 175, 209, 253;
    --accent: #ff6bb3;
    --accent-rgb: 255, 107, 179;
    --success: #22c55e;
    --success-rgb: 34, 197, 94;
    --warning: #f59e0b;
    --warning-rgb: 245, 158, 11;
    --danger: #ef4444;
    --danger-rgb: 239, 68, 68;
    --text-primary: #3e3276;
    --text-secondary: #3e3276;
    --text-muted: #685b9a;
    --bg: #d6d5ec;
    --background: #d6d5ec;
    --bg-card: rgba(229, 237, 255, 0.90);
    --card-bg: rgba(229, 237, 255, 0.90);
    --glass-bg: rgba(229, 237, 255, 0.90);
    --border: #d0c7ff;
    --card-border: #d0c7ff;
    --glass-border: #d0c7ff;
    --input-bg: rgba(229, 237, 255, .72);
    --nav-bg: rgba(229, 237, 255, .94);
    --gradient-1: #d6d5ec;
    --gradient-2: #e5edff;
    --gradient-3: #d6d5ec;
    --gradient-4: #e5edff;
}

html {
    min-height: 100%;
    background: transparent;
}

body {
    margin: 0;
    min-height: 100vh;
            background: 
        linear-gradient(rgba(214, 213, 236, 0.60), rgba(214, 213, 236, 0.60)),
        url('../uploads/background/20260926101143_22078fc8b1dc59302b5f7388.png') center/cover no-repeat fixed;
    background-color: #d6d5ec;
        color: #3e3276;
}

/* 首页曾内置固定浅色主题，这些规则确保后台主题与背景图拥有最终控制权。 */
body.home-page {
        background: linear-gradient(rgba(214, 213, 236, 0.60), rgba(214, 213, 236, 0.60)), url("../uploads/background/20260926101143_22078fc8b1dc59302b5f7388.png") center/cover no-repeat fixed !important;
        color: var(--text-primary) !important;
}

body.home-page .floating-top-nav,
body.home-page .floating-bottom-nav,
body.home-page .product-card,
body.home-page .product-card-body,
body.home-page .quick-menu-content,
body.home-page .notice-content {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
}

body.home-page > .container,
body.home-page .search-section,
body.home-page .scroll-notice-section,
body.home-page .products-section,
body.home-page .featured-section {
    background: transparent !important;
    border-color: transparent !important;
}

body.home-page .search-bar-glass,
body.home-page .nav-action-btn {
    background-color: var(--input-bg) !important;
    border-color: var(--border) !important;
}

body.home-page .quick-order-btn {
    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
    border-color: transparent !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

body.home-page .nav-logo,
body.home-page .section-title,
body.home-page .section-title-new,
body.home-page .product-name,
body.home-page .quick-menu-title {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

body.home-page .section-title-new svg {
    color: var(--primary) !important;
    stroke: var(--primary) !important;
}

body.home-page .nav-action-btn,
body.home-page .section-more,
body.home-page .product-desc,
body.home-page .float-nav-item {
    color: var(--text-muted) !important;
}

body.home-page .product-price,
body.home-page .float-nav-item.active,
body.home-page .float-nav-item.active span {
    color: var(--primary) !important;
    -webkit-text-fill-color: var(--primary) !important;
}

body.home-page .hot-badge {
    background: var(--primary) !important;
    color: #fff !important;
}

/* 兼容旧页面中写死的浅色卡片与菜单。 */
:where(
    .profile-card,
    .balance-card,
    .order-section,
    .menu-section,
    .staff-section,
    .product-card,
    .order-card,
    .detail-card,
    .info-card,
    .form-container,
    .login-box,
    .register-box,
    .notification-item,
    .category-card,
    .staff-card,
    .recharge-card,
    .withdraw-card,
    .modal-new-content,
    .alert-content,
    .product-card-new,
    .product-info-section,
    .card-section,
    .desc-section,
    .image-section,
    .stats-card,
    .stat-card,
    .online-service-card,
    .contact-card,
    .service-time-card,
    .faq-item,
    .feedback-card,
    .feedback-item,
    .staff-list-item,
    .tabs-container,
    .filter-section,
    .staff-tip
) {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}

:where(
    .profile-info h2,
    .balance-label,
    .balance-value,
    .order-title,
    .order-stat-item,
    .order-stat-label,
    .menu-item,
    .menu-item-title,
    .staff-section-title,
    .modal-new-content h3,
    .alert-message
) {
    color: var(--text-primary) !important;
}

:where(
    .profile-id,
    .all-orders-link,
    .menu-item-arrow,
    .form-tip,
    .order-meta,
    .product-meta
) {
    color: var(--text-muted) !important;
}

.menu-item {
    background: var(--bg-card) !important;
    border-bottom-color: var(--border) !important;
}

.menu-item:hover {
    background: var(--input-bg) !important;
}

.menu-item-icon {
    background: var(--input-bg) !important;
}

.menu-item-icon svg,
.menu-item-arrow svg,
.order-stat-icon svg {
    stroke: var(--text-muted) !important;
}

:where(.edit-profile-btn, .recharge-btn, .btn-primary-new) {
    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
    color: #fff !important;
}

.btn-outline-new {
    background: var(--input-bg) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}

:where(
    .top-nav,
    .page-header,
    .bottom-nav,
    .bottom-action-bar,
    .action-bar,
    .fixed-bottom
) {
    background: var(--nav-bg) !important;
    border-color: var(--border) !important;
}

:where(
    .search-bar-glass,
    .search-box,
    .filter-btn,
    .category-tab,
    .order-tab,
    .radio-item,
    .staff-selector,
    .pay-type-item,
    .quantity-control,
    .faq-answer,
    .feedback-content,
    .avatar-upload-area
) {
    background: var(--input-bg) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}

:where(
    .category-tab.active,
    .order-tab.active,
    .filter-btn.active,
    .radio-item.selected,
    .pay-type-item.selected,
    .staff-selector.active
) {
    background: rgba(var(--primary-rgb), .16) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

:where(
    .page-title,
    .nav-title,
    .section-title,
    .section-title-new,
    .product-title,
    .product-name,
    .staff-name,
    .card-title,
    .faq-question,
    .feedback-title
) {
    color: var(--text-primary) !important;
}

:where(
    .product-desc,
    .product-meta,
    .staff-meta,
    .order-meta,
    .empty-state,
    .no-data,
    .rating-text
) {
    color: var(--text-muted) !important;
}

:where(.price, .product-price, .amount, .active-color) {
    color: var(--primary) !important;
}

body,
.page-container,
.main-container,
.app-container {
    color: var(--text-primary);
}

.content-card, .card, .panel, .modal-content, .form-card, .login-container {
    background: var(--bg-card);
    border: 1px solid #d0c7ff;
}

@media (max-width: 700px) {
    body {
        background-attachment: scroll !important;
    }
}

.btn-primary {
    background: linear-gradient(135deg, #aca6dd, #afd1fd);
    color: #fff;
}

.btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.btn-primary,
.primary-btn,
.submit-btn,
.login-btn,
.register-btn {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #d0c7ff;
    color: #3e3276;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #aca6dd;
}

.btn-success {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
}

.btn-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
}

:where(
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    textarea,
    select
) {
    background: var(--input-bg);
    border: 1px solid #d0c7ff;
    color: #3e3276;
}

:where(
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    textarea,
    select
):focus {
    border-color: #aca6dd;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2);
}

:where(input, textarea, select)::placeholder {
    color: var(--text-muted);
    opacity: .85;
}

:where(h1, h2, h3, h4, h5, h6, .title, .card-title, .section-title) {
    color: var(--text-primary);
}

:where(.subtitle, .description, .hint, .meta, .muted, small) {
    color: var(--text-muted);
}

.nav-bar,
.floating-top-nav,
.floating-bottom-nav,
.bottom-nav,
.header,
.top-bar {
    background: var(--nav-bg);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid #d0c7ff;
}

.floating-bottom-nav {
    background: var(--nav-bg) !important;
    border-top-color: var(--border) !important;
}

.float-nav-item.active,
.float-nav-item.active span,
.nav-item.active,
.tab.active {
    color: var(--primary) !important;
}

.nav-action-btn,
.nav-icon {
    color: #685b9a;
}

.nav-action-btn:hover,
.nav-icon:hover {
    color: #aca6dd;
}

a {
    color: #aca6dd;
}

a:hover {
    color: #ff6bb3;
}

::-webkit-scrollbar-thumb {
    background: #aca6dd;
}

::-webkit-scrollbar-track {
    background: #d6d5ec;
}

.alert-success {
    background: rgba(var(--success-rgb), 0.15);
    border-color: #22c55e;
    color: #22c55e;
}

.alert-warning {
    background: rgba(var(--warning-rgb), 0.15);
    border-color: #f59e0b;
    color: #f59e0b;
}

.alert-error {
    background: rgba(var(--danger-rgb), 0.15);
    border-color: #ef4444;
    color: #ef4444;
}

.alert-info {
    background: rgba(var(--primary-rgb), 0.15);
    border-color: #aca6dd;
    color: #aca6dd;
}

/* 用户提示统一使用实色底，避免背景图透出后影响阅读。 */
.success-message,
.alert-success,
.success-msg,
.toast-success,
.toast.success,
.toast-msg.toast-success,
.message-box.message-success,
.info-box.success {
    background: var(--success) !important;
    border-color: var(--success) !important;
    color: #fff !important;
}

.error-message,
.alert-error,
.alert-danger,
.error-msg,
.toast-error,
.toast.error,
.toast-msg.toast-error,
.message.error,
.message-box.message-error,
.alert-message.alert-error {
    background: var(--danger) !important;
    border-color: var(--danger) !important;
    color: #fff !important;
}

.warning-message,
.alert-warning,
.info-box.warning {
    background: var(--warning) !important;
    border-color: var(--warning) !important;
    color: #fff !important;
}

.info-message,
.alert-info {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}