: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.50);
    --card-bg: rgba(229, 237, 255, 0.50);
    --glass-bg: rgba(229, 237, 255, 0.50);
    --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;
    --ui-solid: #e5edff;
    --ui-card-rgb: 229, 237, 255;
    --ui-surface-alpha: 0.50;
    --ui-panel-alpha: 0.88;
    --ui-field-alpha: 0.84;
    --ui-nav-alpha: 0.52;
    --ui-edge: rgba(208, 199, 255, .22);
    --ui-inner-line: rgba(255, 255, 255, .16);
    --ui-shine-soft: .12;
    --ui-rim-light: rgba(255, 255, 255, .38);
    --ui-rim-soft: rgba(255, 255, 255, .10);
    --ui-liquid-shadow: 0 8px 26px rgba(33, 31, 64, .08), inset .5px .5px 0 var(--ui-rim-light), inset -.5px -.5px 0 var(--ui-rim-soft);
    --ui-divider: rgba(208, 199, 255, .65);
    --ui-shadow: 0 4px 16px rgba(33, 31, 64, .045);
    --ui-nav-shadow: 0 5px 20px rgba(33, 31, 64, .06);
    --ui-on-primary: #111827;
    --ui-on-success: #111827;
    --ui-on-warning: #111827;
    --ui-on-danger: #111827;
        --ui-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;
    }

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;
}

/* Shared user-facing surfaces. Layout, permissions, form actions and administrator UI stay independent. */
html body:is(.app-glass-page, .home-page) {
    --ui-surface: var(--ui-solid);
    --ui-panel: var(--ui-solid);
    --ui-nav: var(--ui-solid);
    --ui-field: var(--ui-solid);
    --nav-bg: var(--ui-nav);
    --border: var(--ui-divider);
    --border-color: var(--ui-divider);
    --card-border: var(--ui-divider);
    --glass-border: var(--ui-edge);
    --input-bg: var(--ui-field);
    --primary-gradient: linear-gradient(var(--primary), var(--primary));
    --secondary-gradient: linear-gradient(var(--secondary), var(--secondary));
    --accent-color: var(--accent);
    --ui-material-sheen: linear-gradient(135deg, rgba(255,255,255,var(--ui-shine-soft,.12)), rgba(255,255,255,.015) 42%, transparent 70%);
    --ui-backdrop: blur(26px) saturate(155%);
    background: var(--ui-page-background) !important;
    color: var(--text-primary) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-size: 14px !important;
    line-height: 1.6;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
}

/* The configured background already contains its overlay; suppress the legacy extra black layer. */
html body.app-glass-page.theme-custom-image::before {
    display: none !important;
    content: none !important;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html body:is(.app-glass-page, .home-page) {
        --ui-surface: rgba(var(--ui-card-rgb), var(--ui-surface-alpha));
        --ui-panel: rgba(var(--ui-card-rgb), var(--ui-panel-alpha, .96));
        --ui-nav: rgba(var(--ui-card-rgb), var(--ui-nav-alpha, .84));
        --ui-field: rgba(var(--ui-card-rgb), var(--ui-field-alpha, .94));
    }
}

/* Outer cards share a material; nested text rows keep their simpler layout. */
html body:is(.app-glass-page, .home-page) :is(
    .profile-card, .balance-card, .balance-card-large, .order-section, .staff-section,
    .product-card, .order-card, .detail-card, .info-card, .form-container,
    .login-box, .register-box, .login-card, .register-card, .waiting-card,
    .main-card, .glass-card, .preview-card, .notification-item, .category-card,
    .staff-card, .recharge-card, .withdraw-card, .product-card-new,
    .product-info-section, .card-section, .desc-section, .stats-card, .stat-card,
    .online-service-card, .contact-card, .service-time-card, .faq-item,
    .feedback-card, .feedback-item, .staff-list-item, .form-card, .content-card,
    .card, .panel, .form-box, .form-panel, .pending-container, .rejected-container,
    .result-container, .cashier, .deposit-card, .fine-card, .fines-section,
    .info-section, .staff-info-card, .fund-entry-card, .commission-box,
    .home-text-carousel, .home-order-notice-button
) {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-edge) !important;
    border-radius: var(--ui-card-radius, 18px) !important;
    box-shadow: var(--ui-shadow) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    color: var(--text-primary) !important;
    text-shadow: none !important;
}

/* Recharge uses the same theme surface and blur, without the old tinted gradient/saturation. */
html body.recharge-page :is(.balance-card-large, .recharge-card, .info-card) {
    background: var(--ui-surface) !important;
    background-image: none !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}
html body.recharge-page .balance-card-large::before { background: var(--ui-inner-line) !important; }

html body:is(.app-glass-page, .home-page) :is(
    .floating-top-nav, .top-nav, .top-header, .staff-topbar,
    .header, .top-bar, .nav-bar, .page-header, .bottom-bar,
    .bottom-action-bar, .action-bar, .fixed-bottom, .sidebar,
    .left-panel, .chat-header, .input-area, .tabs-area
) {
    background: var(--ui-nav) !important;
    border-color: var(--ui-edge) !important;
    box-shadow: var(--ui-nav-shadow) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    color: var(--text-primary) !important;
}

/* Home header floats gently; existing links and column layout are unchanged. */
html body.home-page .floating-top-nav {
    top: 10px !important;
    left: 12px !important;
    right: 12px !important;
    width: calc(100% - 24px) !important;
    max-width: none !important;
    min-height: 56px;
    margin: 0 !important;
    padding: 10px 14px !important;
    border: 1px solid var(--ui-edge) !important;
    border-radius: 20px !important;
    transform: none !important;
}

html body.home-page > .container { padding-top: 82px !important; }
html body.home-page .home-banner-carousel.top-slot { margin-top: 0 !important; }
html body.home-page .home-staff-order-alert { margin-top: 0 !important; }
html body.home-page .home-text-tag {
    /* Tag foreground/background are independently configured for each slide. */
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
    font-size: 12px;
}

/* Merchant/service workbenches have their own shells and retain their existing navigation. */
html body.app-glass-page .wrapper {
    background: var(--ui-surface) !important;
    border-color: var(--ui-edge) !important;
    box-shadow: var(--ui-shadow) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}
html body.app-glass-page :is(.right-panel, .messages-area, .users-container) {
    background: transparent !important;
    color: var(--text-primary) !important;
}
html body.app-glass-page :is(.header-subtitle, .chat-status, .user-type-text, .empty-hint, .empty-users, .empty-text, .user-info-box) {
    color: var(--text-muted) !important;
    -webkit-text-fill-color: currentColor !important;
}
html body.app-glass-page :is(.user-box > span, .user-name, .chat-name, .sidebar .logo, .result-title, .result-container .info-row span:last-child) {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: currentColor !important;
}
html body.app-glass-page .sidebar .nav-item {
    color: var(--text-muted) !important;
    background: transparent !important;
}
html body.app-glass-page .sidebar .nav-item.active {
    color: var(--text-primary) !important;
    background: rgba(var(--primary-rgb), .14) !important;
}
html body.app-glass-page :is(.avatar-mini, .user-avatar, .user-avatar-box, .login-header-icon, .stat-icon, .logo-box) {
    background: rgba(var(--primary-rgb), .12) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
}
html body.app-glass-page .msg-bubble {
    background: var(--ui-field) !important;
    border-color: var(--ui-divider) !important;
    color: var(--text-primary) !important;
}
html body.app-glass-page .agent .msg-bubble { background: rgba(var(--primary-rgb), .14) !important; }
html body.app-glass-page :is(.msg-time, .chat-status) { color: var(--text-muted) !important; }
html body.app-service-workbench .tab-btn {
    background: var(--ui-field);
    color: var(--text-muted);
    border-color: var(--ui-divider);
}
html body.app-service-workbench .empty-users > div { color: var(--text-muted) !important; }
html body.app-merchant-workbench .header { padding: 16px; border: 1px solid var(--ui-edge); border-radius: 18px; }
html body.app-glass-page .oauth-btn.wechat { font-size: 15px !important; }
html body.app-glass-page .commission-value { font-size: 24px !important; }
html body.app-glass-page .result-title { font-size: 18px !important; }
html body.app-merchant-workbench::before,
html body.app-merchant-workbench::after { display: none !important; }
html body.app-glass-page :is(.main-card .amount, .deposit-amount) { font-size: 26px !important; color: var(--text-primary) !important; }
html body.app-glass-page :is(.modal-title-text, .machine-title) { font-size: 18px !important; color: var(--text-primary) !important; }
html body.app-glass-page .login-card::before { display: none !important; }
html body.app-glass-page .radio-group { gap: 6px; flex-wrap: wrap; }
html body.app-glass-page .radio-item {
    flex: 1 1 46px;
    min-width: 0;
    min-height: 44px;
    padding: 8px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
html body.app-glass-page .radio-item .radio-label {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 13px;
    white-space: nowrap;
}
html body.app-glass-page .bottom-bar :is(.bottom-bar-label, .bottom-bar-value) {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body:is(.app-glass-page, .home-page) :is(.menu-item, .user-card, .fine-item, .withdraw-item) {
    background: var(--ui-surface) !important;
    border-color: var(--ui-edge) !important;
    box-shadow: var(--ui-shadow) !important;
    color: var(--text-primary) !important;
    border-radius: var(--ui-row-radius, 14px) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

html body:is(.app-glass-page, .home-page) :is(
    .nav-action-btn, .nav-back-btn, .back-btn, .back-button, .header-back,
    .menu-item-icon, .fund-entry-icon,
    .search-bar-glass, .search-box, .sort-bar, .filter-section,
    .radio-item, .pay-type-item, .pay-method, .staff-selector,
    .game-item, .tag-item, .quantity-btn, .amount-btn
) {
    background: var(--ui-field) !important;
    border-color: var(--ui-divider) !important;
    box-shadow: inset 0 1px 0 var(--ui-inner-line) !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Header return controls share one circular shape, including the order creation page. */
html body.app-glass-page :is(.header-back, .nav-back-btn, .back-btn, .back-button, .nav-back-button) {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    min-height: 40px;
    padding: 0 !important;
    border-radius: 50% !important;
    color: var(--text-primary) !important;
}
html body.app-glass-page :is(.header-back, .nav-back-btn, .back-btn, .back-button, .nav-back-button) svg {
    width: 20px;
    height: 20px;
    flex: none;
    stroke: currentColor !important;
}

/* Bare return arrow: the entire touch target must remain visually transparent. */
html body.app-glass-page .staff-topbar .back-btn {
    flex: 0 0 44px;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    transform: none !important;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
}
html body.app-glass-page .staff-topbar .back-btn::before,
html body.app-glass-page .staff-topbar .back-btn::after {
    display: none !important;
    content: none !important;
}
html body.app-glass-page .staff-topbar .back-btn:focus-visible {
    outline: 2px solid rgba(var(--primary-rgb), .5);
    outline-offset: -6px;
}
html body.app-glass-page .staff-topbar .back-btn svg {
    width: 18px;
    height: 18px;
}

/* Search fields are part of the glass wrapper, avoiding a second filled box inside it. */
html body.app-glass-page :is(.staff-search-box, .search-bar-glass) {
    background: var(--ui-surface) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}
html body.app-glass-page :is(.staff-search-box #staffSearch, .search-bar-glass #searchInput) {
    min-width: 0;
    font-size: 13px !important;
    line-height: 1.5;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0;
}
html body.app-glass-page :is(.staff-search-box #staffSearch, .search-bar-glass #searchInput)::placeholder { font-size: inherit; }

/* Keep feedback copy compact without shrinking the existing input/button hit areas. */
html body.app-glass-page #feedback-form :is(.form-select, .form-input, .form-textarea) { font-size: 14px !important; }
html body.app-glass-page #feedback-form .form-label { font-size: 13px !important; }
html body.app-glass-page #feedback-form .feedback-image-input { font-size: 12px !important; }

/* Order shortcuts are plain line icons inside one card, without four extra button tiles. */
html body.mine-page .order-stat-icon {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    flex-shrink: 0;
}
html body.mine-page .order-stat-icon svg {
    display: block;
    flex: none;
    width: 24px !important;
    height: 24px !important;
    fill: none !important;
}
html body.mine-page .menu-item-icon {
    flex: 0 0 32px;
    border-radius: 50% !important;
    box-shadow: none !important;
}
html body.mine-page .menu-item-icon svg {
    display: block;
    flex: none;
    width: 18px !important;
    height: 18px !important;
    fill: none !important;
}

html body:is(.app-glass-page, .home-page) :is(
    .category-tab.active, .order-tab.active, .filter-tab.active, .panel-tab.active,
    .auth-tab.active, .sort-btn.active, .category-item.active,
    .radio-item.selected, .pay-type-item.selected, .pay-method.active,
    .staff-selector.active, .game-item.selected, .amount-btn.active, .tab-btn.active
) {
    background: rgba(var(--primary-rgb), .14) !important;
    border-color: rgba(var(--primary-rgb), .40) !important;
    box-shadow: inset 0 1px 0 var(--ui-inner-line) !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Solid primary controls stay legible even with the site's pastel theme colors. */
html body:is(.app-glass-page, .home-page) :is(
    .btn-primary, .btn-primary-new, .btn-primary-login, .primary-btn,
    .submit-btn, .login-btn, .register-btn, .modal-btn-primary,
    .bottom-bar-btn, .btn-pay, .quick-order-btn, .recharge-btn,
    .send-button, .edit-profile-btn, .completion-confirm-button
) {
    background: var(--primary) !important;
    border-color: transparent !important;
    color: var(--ui-on-primary) !important;
    -webkit-text-fill-color: var(--ui-on-primary) !important;
    box-shadow: 0 3px 10px rgba(var(--primary-rgb), .16) !important;
    text-shadow: none !important;
}

html body:is(.app-glass-page, .home-page) :is(
    .btn-secondary, .btn-outline-new, .modal-btn-outline,
    .pending-btn, .rejected-btn, .filter-tab, .panel-tab, .auth-tab
) {
    background: var(--ui-field) !important;
    border-color: var(--ui-divider) !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
}

/* Auxiliary buttons retain the separately configured secondary brand color. */
html body:is(.app-glass-page, .home-page) .btn-secondary {
    background: rgba(var(--secondary-rgb), .14) !important;
    border-color: rgba(var(--secondary-rgb), .40) !important;
}

/* Status colors keep their own settings, with text contrast matching the admin preview. */
html body:is(.app-glass-page, .home-page) :is(.btn-success, .success-message, .alert-success, .success-msg, .toast-success, .toast.success, .message-box.message-success, .info-box.success) {
    background: var(--success) !important;
    color: var(--ui-on-success, #fff) !important;
    -webkit-text-fill-color: var(--ui-on-success, #fff) !important;
}
html body:is(.app-glass-page, .home-page) :is(.btn-warning, .warning-message, .alert-warning, .info-box.warning) {
    background: var(--warning) !important;
    color: var(--ui-on-warning, #fff) !important;
    -webkit-text-fill-color: var(--ui-on-warning, #fff) !important;
}
html body:is(.app-glass-page, .home-page) :is(.btn-danger, .error-message, .alert-error, .alert-danger, .error-msg, .toast-error, .toast.error, .message.error, .message-box.message-error) {
    background: var(--danger) !important;
    color: var(--ui-on-danger, #fff) !important;
    -webkit-text-fill-color: var(--ui-on-danger, #fff) !important;
}

html body:is(.app-glass-page, .home-page) :is(
    .btn, .btn-primary-new, .btn-outline-new, .btn-primary-login, .primary-btn,
    .submit-btn, .modal-btn, .bottom-bar-btn, .btn-action, .send-button,
    .pending-btn, .rejected-btn, .button, .edit-profile-btn
) {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    min-height: 44px;
    border-radius: 12px;
}

html body:is(.app-glass-page, .home-page) :is(
    input[type=text], input[type=email], input[type=password], input[type=number],
    input[type=tel], input[type=url], input[type=search], input[type=date],
    textarea, select, .form-input, .form-textarea, .glass-input, .input-field
) {
    box-sizing: border-box;
    background: var(--ui-field) !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: currentColor !important;
    border: 1px solid var(--ui-divider) !important;
    border-radius: 11px;
    box-shadow: inset 0 1px 0 var(--ui-inner-line) !important;
    font-family: inherit;
    font-size: 14px !important;
    line-height: 1.5;
}

html body:is(.app-glass-page, .home-page) :is(input, textarea, select):focus {
    outline: 2px solid rgba(var(--primary-rgb), .38);
    outline-offset: 1px;
    border-color: var(--primary) !important;
}

/* Compact typography: section hierarchy remains visible without oversized headings. */
html body:is(.app-glass-page, .home-page) :is(h1, h2, .page-title, .login-header h1) {
    font-size: 20px !important;
    font-weight: 650 !important;
    line-height: 1.4 !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}
html body:is(.app-glass-page, .home-page) :is(
    h3, h4, .card-title, .section-title, .section-title-new, .order-title,
    .modal-title, .modal-header h3, .recharge-card h2, .fines-title
) {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: currentColor !important;
}
html body:is(.app-glass-page, .home-page) :is(.nav-title, .header-title, .title-text, .staff-topbar .title) {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: currentColor !important;
}
html body.home-page .nav-logo { font-size: 18px !important; font-weight: 700 !important; letter-spacing: 0; }
html body:is(.app-glass-page, .home-page) :is(
    .form-label, .form-group label, .form-group-new label, .menu-item-title,
    .faq-question, .product-name, .staff-name, .user-name-text,
    .info-value, .detail-value, .home-text-content, .home-order-notice-button .notice-label
) {
    font-size: 14px !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: currentColor !important;
}
html body:is(.app-glass-page, .home-page) :is(
    .profile-id, .order-meta, .product-meta, .staff-meta, .form-tip, .form-help,
    .info-label, .detail-label, .stat-label, .balance-label,
    .balance-label-large, .order-stat-label,
    .notice-badge, .section-more, .result-desc, .auto-redirect, .empty-state-hint
) {
    font-size: 12px !important;
    color: var(--text-muted) !important;
    -webkit-text-fill-color: currentColor !important;
}
html body:is(.app-glass-page, .home-page) :is(.product-card-name, .home-promo-card-title) { font-size: 14px !important; }
html body:is(.app-glass-page, .home-page) :is(.balance-value, .balance-value-large, .stat-value, .cashier .amount) {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: currentColor !important;
    font-variant-numeric: tabular-nums;
}
html body:is(.app-glass-page, .home-page) :is(.stat-value, .cashier .amount) { font-size: 26px !important; }
html body:is(.app-glass-page, .home-page) .balance-value { font-size: 18px !important; }
html body:is(.app-glass-page, .home-page) .balance-value-large { font-size: 22px !important; }
html body:is(.app-glass-page, .home-page) :is(.bottom-bar-value, .product-card-price, .product-price) { font-size: 18px !important; }

/* Lists and money/QR panels use a denser surface for reliable reading. */
html body:is(.app-glass-page, .home-page) :is(.cashier, .order-details, .fee-section, .info-section, .recharge-record) {
    background: var(--ui-panel) !important;
    color: var(--text-primary) !important;
}
html body:is(.app-glass-page, .home-page) :is(.info-row, .detail-item, .order-footer, .card-header, .modal-header-new, .modal-footer-new, .fee-divider) {
    border-color: var(--ui-divider) !important;
}
html body:is(.app-glass-page, .home-page) :is(.product-card-body, .product-card-new .product-card-body, .card-body) { background: transparent !important; }

html body:is(.app-glass-page, .home-page) :is(
    .modal-content, .modal-content-new, .modal-new-content, .alert-content,
    .notice-content, .notice-modal-content, .staff-dropdown, .modal-box
) {
    background: var(--ui-panel) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--ui-edge) !important;
    border-radius: 20px !important;
    box-shadow: var(--ui-nav-shadow) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
html body:is(.app-glass-page, .home-page) #order-notice-reader .on-dialog {
    background: var(--ui-panel) !important;
    border-color: var(--ui-edge) !important;
    box-shadow: var(--ui-nav-shadow) !important;
}
html body:is(.app-glass-page, .home-page) #order-notice-reader h2 { font-size: 17px !important; }
html body:is(.app-glass-page, .home-page) #order-notice-reader :is(.on-copy, label) { font-size: 14px !important; }
html body:is(.app-glass-page, .home-page) #order-notice-reader .on-tab { font-size: 13px !important; }
html body:is(.app-glass-page, .home-page) #order-notice-reader .on-tab[aria-selected=true] { background: rgba(var(--primary-rgb), .16) !important; }

/* Keep illustrated banners sharp; the caption gets a small localized contrast scrim. */
html body.home-page :is(.home-promo-card, .home-banner-carousel-viewport) {
    border: 1px solid var(--ui-edge) !important;
    border-radius: 20px !important;
    box-shadow: var(--ui-shadow) !important;
}
html body.home-page .home-promo-card-overlay { background: linear-gradient(transparent 55%, rgba(15, 18, 35, .48)) !important; }
html body.home-page .home-promo-card-title { color: #fff !important; -webkit-text-fill-color: #fff !important; font-weight: 600 !important; }

/* Error/login result views share the same surface, without altering success/error semantics. */
html body.app-glass-page .box {
    box-sizing: border-box;
    background: var(--ui-panel) !important;
    border: 1px solid var(--ui-edge) !important;
    box-shadow: var(--ui-shadow) !important;
    color: var(--text-primary) !important;
}
html body.app-glass-page .box p { color: var(--text-muted) !important; font-size: 14px !important; }
html body.app-glass-page :is(.glow-circle, .particle, .bg-animation) { display: none !important; }
html body.app-payment-redirect .container {
    width: min(420px, calc(100% - 32px));
    padding: 24px;
    background: var(--ui-panel);
    border: 1px solid var(--ui-edge);
    border-radius: 18px;
    box-shadow: var(--ui-shadow);
}
html body.app-payment-redirect .text { color: var(--text-primary); font-size: 14px; }
html body.app-payment-redirect .info { color: var(--text-muted); font-size: 12px; }
html body.app-payment-redirect .spinner { border-color: var(--ui-divider); border-top-color: var(--primary); }

/* Translucent tint, saturated backdrop and a hairline directional rim. */
html body:is(.app-glass-page, .home-page) :is(
    .profile-card, .balance-card, .balance-card-large, .order-section, .staff-section,
    .product-card, .order-card, .detail-card, .info-card, .form-container,
    .login-box, .register-box, .login-card, .register-card, .waiting-card,
    .main-card, .glass-card, .preview-card, .notification-item, .category-card,
    .staff-card, .recharge-card, .withdraw-card, .product-card-new,
    .product-info-section, .card-section, .desc-section, .stats-card, .stat-card,
    .online-service-card, .contact-card, .service-time-card, .faq-item,
    .feedback-card, .feedback-item, .staff-list-item, .form-card, .content-card,
    .card, .panel, .form-box, .form-panel, .deposit-card, .fine-card,
    .pending-container, .rejected-container, .result-container, .cashier,
    .info-section, .user-card, .fine-item, .withdraw-item,
    .fines-section, .staff-info-card, .fund-entry-card, .commission-box,
    .home-text-carousel, .home-order-notice-button, .menu-item, .wrapper,
    .floating-top-nav, .top-nav, .top-header, .header, .staff-topbar,
    .page-header, .top-bar, .nav-bar, .bottom-bar, .bottom-action-bar,
    .modal-content, .modal-content-new, .modal-new-content,
    .notice-content, .notice-modal-content, .on-dialog,
    .recharge-page .balance-card-large, .recharge-page .recharge-card, .recharge-page .info-card
) {
    background-image: var(--ui-material-sheen) !important;
    box-shadow: var(--ui-liquid-shadow, var(--ui-shadow)) !important;
    background-repeat: no-repeat !important;
    backdrop-filter: var(--ui-backdrop) !important;
    -webkit-backdrop-filter: var(--ui-backdrop) !important;
}
html body:is(.app-glass-page, .home-page) :is(
    .staff-search-box, .search-bar-glass, .search-box, .filter-section,
    .action-bar, .fixed-bottom, .sidebar, .left-panel, .chat-header, .input-area, .tabs-area,
    .alert-content, .staff-dropdown, .modal-box, .box
) {
    backdrop-filter: var(--ui-backdrop) !important;
    -webkit-backdrop-filter: var(--ui-backdrop) !important;
}
html body:is(.app-glass-page, .home-page) .capsule-bottom-nav:is(.floating-bottom-nav, .bottom-nav) {
    background-image: var(--ui-material-sheen) !important;
    box-shadow: var(--ui-liquid-shadow, var(--ui-nav-shadow)) !important;
    backdrop-filter: var(--ui-backdrop) !important;
    -webkit-backdrop-filter: var(--ui-backdrop) !important;
}

/* Shared, theme-colored line art; brand logos and customer images are independent. */
html body:is(.app-glass-page, .home-page) svg.app-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    vertical-align: -.2em;
    pointer-events: none;
}
html body:is(.app-glass-page, .home-page) .capsule-bottom-nav :is(svg, img, .float-nav-symbol, .nav-item > i) { filter: none !important; }
html body:is(.app-glass-page, .home-page) :is(.card-header, .section-title, .card-title) .app-icon { width: 18px; height: 18px; color: var(--text-muted); }
html body.app-glass-page :is(.btn, button, .payment-name) > .app-icon { width: 16px; height: 16px; margin-inline-end: 4px; }
html body.app-glass-page :is(.section-icon, .contact-icon, .stat-icon, .logo-icon, .logo-box, .pay-type-icon, .payment-icon).ui-icon-holder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted) !important;
    background: rgba(var(--primary-rgb), .08) !important;
    box-shadow: none !important;
}
html body.app-glass-page .section-icon.ui-icon-holder { width: 28px; height: 28px; border-radius: 9px; }
html body.app-glass-page :is(.empty-icon, .empty-state-icon, .empty-users-icon, .chat-empty-icon, .empty-notifications > .icon).ui-icon-holder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 32px !important;
    line-height: 1;
}
html body.app-glass-page :is(.empty-icon, .empty-state-icon, .empty-users-icon, .chat-empty-icon, .empty-notifications > .icon).ui-icon-holder .app-icon { width: 36px; height: 36px; }
html body.app-glass-page :is(.result-icon, .rejected-icon, .alert-icon).ui-icon-holder { display: flex; align-items: center; justify-content: center; }
html body.app-glass-page :is(.result-icon, .rejected-icon, .alert-icon).ui-icon-holder .app-icon { width: 32px; height: 32px; }
html body.app-glass-page :is(.product-avatar, .product-banner-placeholder, .staff-avatar, .staff-dropdown-avatar, .staff-selector-avatar).ui-icon-holder { display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
html body.app-glass-page .product-banner-placeholder.ui-icon-holder .app-icon { width: 40px; height: 40px; }
html body.app-glass-page :is(.nav-back-btn, .header-back, .menu-item-icon, .order-stat-icon, .nav-action-btn) svg { stroke-width: 1.7; }
html body:is(.app-glass-page, .home-page) :is(.product-price, .product-card-price) {
    background: none !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: currentColor !important;
    font-weight: 650;
}

/* Keep the material on the section; nested order fields use alignment and dividers. */
html body.app-glass-page .platform-form-card .form-item {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ui-divider) !important;
    border-radius: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
html body.app-glass-page .platform-form-card .form-item:last-child { border-bottom: 0 !important; }

/* Move title text slightly, preserving header controls and their touch targets. */
html body:is(.app-glass-page, .home-page) :is(
    .floating-top-nav > .nav-logo, .floating-top-nav > .nav-title,
    .top-nav > .logo-text, .header > .header-title,
    .staff-topbar > .title, .top-bar .title-text
) { transform: translateX(5px); }

@media (max-width: 600px) {
    html body:is(.app-glass-page, .home-page) {
        --ui-card-radius: 14px;
        --ui-row-radius: 12px;
        --capsule-nav-height: 58px;
        --capsule-nav-clearance: calc(var(--capsule-nav-height) + var(--capsule-nav-bottom, 12px) + 16px);
        background-attachment: scroll !important;
        font-size: 13px !important;
        line-height: 1.55;
    }
    html body:is(.app-glass-page, .home-page) :is(input:not([type=checkbox]):not([type=radio]), textarea, select) { font-size: 14px !important; }
    html body:is(.app-glass-page, .home-page) :is(h1, h2, .page-title, .login-header h1) { font-size: 16px !important; line-height: 1.4 !important; }
    html body:is(.app-glass-page, .home-page) :is(h3, h4, .card-title, .section-title, .section-title-new, .order-title, .modal-title, .recharge-card h2) { font-size: 14px !important; }
    html body:is(.app-glass-page, .home-page) :is(.nav-title, .header-title, .title-text, .staff-topbar .title) { font-size: 15px !important; }
    html body:is(.app-glass-page, .home-page) :is(.form-label, .form-group label, .form-group-new label, .menu-item-title, .faq-question, .product-name, .staff-name, .info-value, .detail-value, .home-text-content) { font-size: 13px !important; }
    html body.home-page .nav-logo { font-size: 16px !important; }
    html body.home-page :is(.product-card-name, .home-promo-card-title) { font-size: 13px !important; }

    /* Tighten the material and its whitespace, keeping image tiles and nested card bodies separate. */
    html body:is(.app-glass-page, .home-page) :is(
        .profile-card, .balance-card, .balance-card-large, .order-section, .staff-section,
        .order-card, .detail-card, .info-card, .form-container, .main-card,
        .glass-card, .preview-card, .notification-item, .recharge-card, .withdraw-card,
        .card-section, .desc-section, .stats-card, .stat-card, .online-service-card,
        .contact-card, .service-time-card, .feedback-card, .feedback-item,
        .content-card, .form-box, .form-panel, .deposit-card, .fine-card,
        .fines-section, .staff-info-card, .fund-entry-card, .commission-box,
        .waiting-card, .pending-container, .rejected-container, .result-container,
        .cashier, .card, .panel
    ) { padding: 14px !important; margin-bottom: 12px !important; }
    html body.app-glass-page #feedback-form { padding: 14px !important; }
    html body:is(.app-glass-page, .home-page) :is(.login-card, .register-card, .login-box, .register-box) { padding: 20px !important; }
    html body:is(.app-glass-page, .home-page) :is(.form-card, .product-card-new, .staff-list-item, .faq-item) { margin-bottom: 12px !important; }
    html body:is(.app-glass-page, .home-page) .card-header { padding: 10px 12px !important; font-size: 13px !important; }
    html body:is(.app-glass-page, .home-page) .card-body { padding: 12px !important; }
    html body.app-glass-page .product-card-new .product-card-body { padding: 10px !important; }
    html body.app-glass-page :is(.form-item, .form-group, .form-group-new) { margin-bottom: 12px; }
    html body.app-glass-page :is(.form-item:last-child, .form-group:last-child, .form-group-new:last-child) { margin-bottom: 0; }
    html body.app-glass-page :is(.form-card .form-item, .form-card .radio-group) { gap: 8px; }
    html body.app-glass-page .form-card .form-item { padding: 10px 12px !important; border-radius: 12px; }
    html body.app-glass-page #feedback-form .form-group { margin: 0; }
    html body:is(.app-glass-page, .home-page) > :is(.container, .main-content, .staff-page-container) { padding-left: 12px !important; padding-right: 12px !important; }
    html body.app-glass-page:not(.app-service-workbench):not(.app-merchant-workbench) > .header ~ .main-content { padding-top: 64px !important; }
    html body.app-glass-page > .top-nav ~ .main-content { padding-top: 72px !important; }

    html body:is(.app-glass-page, .home-page):not(.app-service-workbench):not(.app-merchant-workbench) :is(.floating-top-nav, .top-nav, .header) {
        min-height: 52px !important;
        height: 52px !important;
        padding: 4px 10px !important;
    }
    html body.home-page .floating-top-nav { top: 8px !important; border-radius: 16px !important; }
    html body.home-page > .container { padding-top: 74px !important; }
    html body.recharge-page .balance-card-large { margin-top: 72px; }
    html body.recharge-page .recharge-card h3 { margin-bottom: 12px; }
    html body.recharge-page .amount-grid { gap: 8px; margin-bottom: 14px; }
    html body.recharge-page .amount-btn { min-height: 44px; padding: 9px 6px !important; font-size: 13px !important; border-radius: 11px; }
    html body.recharge-page .pay-method { padding: 12px; }
    html body:is(.app-glass-page, .home-page) :is(.balance-value) { font-size: 16px !important; }
    html body:is(.app-glass-page, .home-page) :is(.balance-value-large, .stat-value, .cashier .amount, .main-card .amount, .deposit-amount, .commission-value) { font-size: 20px !important; }
    html body.app-glass-page :is(.result-title, .modal-title-text, .machine-title, .sidebar .logo) { font-size: 16px !important; }
    html body:is(.app-glass-page, .home-page) :is(.bottom-bar-value, .product-card-price, .product-price) { font-size: 16px !important; }
    html body.app-glass-page :is(.btn, .btn-primary-new, .btn-outline-new, .btn-primary-login, .primary-btn, .submit-btn, .modal-btn, .bottom-bar-btn, .btn-action, .send-button, .edit-profile-btn) {
        min-height: 44px;
        padding: 9px 12px;
        font-size: 13px !important;
        border-radius: 10px;
    }
    html body.app-glass-page :is(.form-input, .form-textarea, .input-field, .glass-input) { padding: 9px 11px; }
    html body.app-glass-page input:is(.form-input, .input-field, .glass-input) { min-height: 44px; }
    html body.app-glass-page :is(.bottom-bar, .bottom-action-bar, .action-bar, .fixed-bottom) { padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
    html body.app-glass-page :is(.modal-content, .modal-content-new, .modal-new-content, .alert-content, .modal-box) { border-radius: 16px !important; }
    html body.app-glass-page :is(.modal-header-new, .modal-footer-new) { padding: 12px 14px; }

    html body.mine-page .profile-header { gap: 12px; }
    html body.mine-page .profile-avatar { width: 56px; height: 56px; }
    html body.mine-page .profile-info { min-width: 0; overflow-wrap: anywhere; }
    html body.mine-page .profile-id { margin-bottom: 4px; }
    html body.mine-page .order-header { margin-bottom: 8px; }
    html body.mine-page .order-stat-item { padding: 8px 4px; gap: 5px; }
    html body.mine-page .order-stat-icon { width: 22px; height: 22px; margin-bottom: 0; }
    html body.mine-page .order-stat-icon svg { width: 22px !important; height: 22px !important; }
    html body.mine-page .order-stat-label { font-size: 11px !important; }
    html body.mine-page .menu-section { gap: 8px; margin-bottom: 12px; }
    html body.mine-page .menu-item { min-height: 48px; padding: 10px 12px !important; margin-bottom: 0; }
    html body.mine-page .menu-item-icon { width: 28px; height: 28px; flex-basis: 28px; margin-right: 12px; }
    html body.mine-page .menu-item-icon svg { width: 16px !important; height: 16px !important; }
    html body.app-glass-page .staff-list-name { font-size: 14px; }
    html body.app-glass-page .login-header { margin-bottom: 16px; }
    html body.app-glass-page .login-header-icon { width: 56px; height: 56px; margin-bottom: 12px; }

    /* This lives in the uncached dynamic theme, overriding even an older cached navigation CSS. */
    html body:is(.app-glass-page, .home-page) .capsule-bottom-nav:is(.floating-bottom-nav, .bottom-nav) {
        width: 86% !important;
        max-width: 360px !important;
        height: var(--capsule-nav-height) !important;
        padding: 6px 8px !important;
    }
    html body:is(.app-glass-page, .home-page) .capsule-bottom-nav :is(.float-nav-item, .nav-item) { gap: 3px !important; padding: 1px 2px !important; font-size: 10.5px !important; }
    html body:is(.app-glass-page, .home-page) .capsule-bottom-nav :is(img, svg, .float-nav-symbol, .nav-item > i) {
        flex: 0 0 20px !important;
        width: 20px !important;
        min-width: 20px !important;
        height: 20px !important;
        font-size: 20px !important;
        line-height: 20px !important;
    }
    html body.app-merchant-workbench .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    html body.app-merchant-workbench .stat-card { padding: 14px; }
    html body.app-merchant-workbench .stat-value { font-size: 20px !important; }
    html body.app-service-workbench .wrapper { height: 100vh; height: 100dvh; margin: 0; border-radius: 0; }
    html body.app-service-workbench .top-bar { height: auto; flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
    html body.app-service-workbench .top-left { min-width: 0; }
    html body.app-service-workbench .title-text { white-space: nowrap; }
    html body.app-service-workbench .top-right { width: 100%; justify-content: space-between; gap: 8px; }
    html body.app-service-workbench :is(.online-status, .logout-link) { white-space: nowrap; }
    html body.app-service-workbench .user-box { min-width: 0; }
    html body.app-service-workbench .main-body { flex-direction: column; min-height: 0; }
    html body.app-service-workbench .left-panel { width: 100%; height: 28%; flex: 0 0 28%; min-height: 160px; border-right: 0; border-bottom: 1px solid var(--ui-divider); }
    html body.app-service-workbench .right-panel { width: 100%; min-width: 0; min-height: 0; flex: 1 1 0; }
    html body.app-service-workbench .empty-users { padding: 16px 12px; }
    html body.app-service-workbench .empty-users-icon { font-size: 28px; margin-bottom: 6px; }
}

@media (max-width: 420px) {
    html body.app-glass-page .platform-form-card .form-item { grid-template-columns: 76px minmax(0, 1fr); }
    html body.app-glass-page .platform-form-card .form-label { white-space: normal; }
}

@media (prefers-reduced-transparency: reduce) {
    html body:is(.app-glass-page, .home-page) {
        --ui-material-sheen: none;
        --ui-backdrop: none;
        --ui-surface: var(--ui-solid); --ui-panel: var(--ui-solid);
        --ui-nav: var(--ui-solid); --ui-field: var(--ui-solid);
    }
}
@media (prefers-reduced-motion: reduce) {
    html body:is(.app-glass-page, .home-page) :is(.fade-in-up, .animate-in, .animate-slide) { animation: none !important; opacity: 1 !important; transform: none !important; }
}