:root {
    --h5-shell-outer-bg: #fff7d8;
    --front-yellow: #fad34e;
    --front-yellow-hover: #e8b83a;
    --front-yellow-deep: #b77900;
    --front-yellow-ink: #3f2f05;
    --front-yellow-soft: #fff7d8;
    --front-yellow-softer: #fffbeb;
    --front-yellow-border: rgba(250, 211, 78, 0.34);
    --front-yellow-shadow: rgba(183, 121, 0, 0.18);
}

html body {
    color: #0f172a !important;
}

html body.bg-custom::before,
html body.overlay::before {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 247, 216, 0.46) 50%, rgba(255, 242, 190, 0.36)),
        radial-gradient(circle at 18% 16%, rgba(250, 211, 78, 0.18), transparent 30%),
        radial-gradient(circle at 84% 12%, rgba(232, 184, 58, 0.12), transparent 28%) !important;
}

html body .auth-card,
html body .profile-card,
html body .page-card,
html body .page-header,
html body .content-card,
html body .record-card,
html body .mine-header,
html body .stat-card,
html body .points-card,
html body .content-list,
html body .square-header,
html body .cert-header,
html body .cert-card,
html body .card,
html body .transparent-wrapper,
html body .instructions,
html body .message-box,
html body .list,
html body .status-list,
html body .btn,
html body .item-card,
html body .notice-wrapper,
html body .beauty-card,
html body .goods-detail-wrap,
html body .modal-content,
html body .video-hero,
html body .video-card,
html body .video-tabs-panel,
html body .language-card,
html body .province-dropdown,
html body .province-search-box,
html body .header-image,
html body .simple-nav,
html body .search-area,
html body .balance-info,
html body .embedded-browser,
html body .browser-header,
html body .no-data,
html body .empty-state,
html body .cert-row .cert-item,
html body .order-row .order-item,
html body .bg-black\/20,
html body .bg-black\/30,
html body .bg-black\/40,
html body .bg-black\/50,
html body .bg-black\/60,
html body .bg-black\/70,
html body .bg-black\/80,
html body .bg-black\/90,
html body .bg-gray-800\/30,
html body .bg-gray-900\/50,
html body .bg-white\/5,
html body .bg-white\/10,
html body .bg-pink-900\/20,
html body .bg-pink-900\/30 {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-color: var(--front-yellow-border) !important;
    color: #0f172a !important;
    box-shadow: 0 18px 45px rgba(63, 47, 5, 0.09) !important;
}

html body footer,
html body footer.fixed,
html body footer[class*="fixed"] {
    background-color: rgba(255, 255, 255, 0.94) !important;
    border-color: rgba(250, 211, 78, 0.72) !important;
    color: #0f172a !important;
    box-shadow: 0 -12px 32px rgba(63, 47, 5, 0.08) !important;
}

html body .text-sky-400,
html body .text-sky-500,
html body .text-sky-600,
html body .text-sky-700,
html body .text-sky-800,
html body .text-sky-900,
html body .text-blue-400,
html body .text-blue-500,
html body .text-blue-600,
html body .text-blue-700,
html body .text-blue-800,
html body .text-blue-900,
html body .text-cyan-400,
html body .text-cyan-500,
html body .text-cyan-600,
html body .text-teal-400,
html body .text-teal-500,
html body .text-teal-600,
html body .text-indigo-400,
html body .text-indigo-500,
html body .text-indigo-600,
html body .text-purple-400,
html body .text-purple-500,
html body .text-purple-600,
html body .text-pink-100,
html body .text-pink-200,
html body .text-pink-200\/70,
html body .text-pink-200\/80,
html body .text-pink-200\/90,
html body .text-pink-300,
html body .text-pink-300\/70,
html body .text-pink-300\/80,
html body .text-pink-400,
html body .text-pink-400\/70,
html body .text-pink-400\/80,
html body .bank-accent,
html body .page-accent,
html body .goods-desc-label,
html body .beauty-stats,
html body .section-link,
html body .marquee-prefix,
html body .square-region-pill,
html body .square-region-button,
html body .notice-title i,
html body .setting-btn:hover,
html body .back-link:hover,
html body .hotel,
html body .hotel .hd,
html body .hotel .text,
html body .order-no,
html body .set-pwd-link,
html body .pwd-toggle,
html body .balance-info .value,
html body .category-tab i,
html body .video-hero-icon,
html body .chip,
html body .empty-icon,
html body .withdraw-account-icon,
html body .nav-item.active,
html body .nav-item:not(.active):hover,
html body .language-item[style*="#0284c7"] {
    color: var(--front-yellow-deep) !important;
}

html body .text-white,
html body .text-gray-100,
html body .text-gray-200,
html body .text-gray-300,
html body .text-gray-400,
html body .text-gray-500 {
    color: #0f172a !important;
}

html body .bg-sky-50,
html body .bg-sky-100,
html body .bg-blue-50,
html body .bg-blue-100,
html body .bg-cyan-50,
html body .bg-cyan-100,
html body .bg-teal-50,
html body .bg-teal-100,
html body .bg-indigo-50,
html body .bg-indigo-100,
html body .bg-purple-50,
html body .bg-purple-100,
html body .bg-pink-50,
html body .bg-pink-100,
html body .bg-pink-500\/20,
html body .bg-pink-900\/30,
html body .bg-orange-500,
html body .status-settled,
html body .remark-box,
html body .message-item:hover,
html body .hotel,
html body .list-icon,
html body .certify-icon,
html body .empty-icon,
html body .region-pill,
html body .quick-amount:hover,
html body .quick-amount.active,
html body .quick-amount.amount-picked,
html body .withdraw-account-panel,
html body .withdraw-account-icon,
html body .province-item:hover,
html body .language-card.active,
html body .language-card:hover,
html body .badge-note,
html body .chip.bg-pink-500\/80 {
    background-color: var(--front-yellow-soft) !important;
    border-color: var(--front-yellow-border) !important;
    color: var(--front-yellow-deep) !important;
}

html body .bg-sky-500,
html body .bg-sky-600,
html body .bg-blue-500,
html body .bg-blue-600,
html body .bg-cyan-500,
html body .bg-cyan-600,
html body .bg-teal-500,
html body .bg-teal-600,
html body .bg-indigo-500,
html body .bg-indigo-600,
html body .bg-purple-500,
html body .bg-purple-600,
html body .bg-pink-500,
html body .bg-pink-600,
html body .btn-pink,
html body .order-btn,
html body .modal-confirm-btn,
html body .modal-btn,
html body .unread-dot,
html body .hover\:bg-sky-600:hover,
html body .hover\:bg-blue-600:hover,
html body .hover\:bg-pink-600:hover,
html body .hover\:bg-purple-600:hover,
html body .hover\:bg-teal-600:hover,
html body .btn-primary,
html body .primary-btn,
html body .watch-btn,
html body .login-success-btn,
html body .logout-btn,
html body .province-item.selected,
html body .pagination-btn.active,
html body .category-tab.active,
html body .region-chip.active,
html body .region-chip:hover,
html body .search-form button,
html body #closePopup {
    background-color: var(--front-yellow) !important;
    background-image: none !important;
    border-color: var(--front-yellow) !important;
    color: var(--front-yellow-ink) !important;
    box-shadow: 0 12px 28px var(--front-yellow-shadow) !important;
}

html body .primary-btn:hover,
html body .watch-btn:hover,
html body .login-success-btn:hover,
html body .logout-btn:hover,
html body .btn-pink:hover,
html body .order-btn:hover,
html body .modal-confirm-btn:hover,
html body .modal-btn:hover,
html body .search-form button:hover,
html body .hover\:bg-sky-700:hover,
html body .hover\:bg-blue-700:hover,
html body .hover\:bg-pink-700:hover {
    background-color: var(--front-yellow-hover) !important;
    border-color: var(--front-yellow-hover) !important;
    color: var(--front-yellow-ink) !important;
}

html body .marquee-icon,
html body .login-success-icon,
html body .section-title::before,
html body .carousel-dot.active,
html body .id-badge,
html body .table-header .header-item {
    background: var(--front-yellow) !important;
    background-color: var(--front-yellow) !important;
    border-color: var(--front-yellow) !important;
    color: var(--front-yellow-ink) !important;
    box-shadow: 0 8px 20px var(--front-yellow-shadow) !important;
}

html body .cert-value,
html body .desc-section-title,
html body .desc-content strong,
html body .stat-value,
html body .modal-icon,
html body .modal-icon i,
html body .certify-icon,
html body .certify-icon i,
html body .text-pink,
html body .remark-box,
html body .empty-state i,
html body .back-link,
html body .language-card.active span,
html body .language-card.active i {
    color: var(--front-yellow-deep) !important;
}

html body .transparent-wrapper,
html body .instructions,
html body .message-box,
html body .list,
html body .status-list,
html body .btn,
html body .item-card {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-color: var(--front-yellow-border) !important;
    color: #0f172a !important;
}

html body .list:hover,
html body .status-list:hover,
html body .btn:hover,
html body .item-card:hover {
    background-color: var(--front-yellow-soft) !important;
    border-color: rgba(250, 211, 78, 0.54) !important;
}

html body .list.selected,
html body .status-list.selected,
html body .item-card.selected {
    background-color: var(--front-yellow-soft) !important;
    border-color: rgba(250, 211, 78, 0.72) !important;
    box-shadow: 0 14px 32px var(--front-yellow-shadow) !important;
}

html body .list .text,
html body .status-list .text,
html body .btn .text,
html body .instructions h3,
html body .instructions li {
    color: #0f172a !important;
}

html body .certify-icon,
html body .modal-icon,
html body .modal-icon.warning,
html body .modal-icon.error {
    background: var(--front-yellow-soft) !important;
    background-color: var(--front-yellow-soft) !important;
    border-color: var(--front-yellow-border) !important;
}

html body .btn img,
html body .status-list img {
    filter: sepia(1) saturate(2.2) hue-rotate(356deg) brightness(0.86) !important;
}

html body .vip-bg,
html body .vip-right {
    filter: sepia(0.95) saturate(1.45) hue-rotate(352deg) brightness(1.08) !important;
}

html body .bg-gradient-to-r.from-sky-500,
html body .bg-gradient-to-r.from-blue-500,
html body .bg-gradient-to-r.from-pink-500,
html body .bg-gradient-to-r.from-purple-500,
html body .bg-gradient-to-r.from-indigo-500,
html body .from-sky-500,
html body .from-blue-500,
html body .from-pink-500,
html body .from-purple-500,
html body .from-indigo-500,
html body .hover\:from-sky-600:hover,
html body .hover\:from-blue-600:hover,
html body .hover\:from-pink-600:hover,
html body .hover\:from-purple-600:hover {
    --tw-gradient-from: var(--front-yellow) !important;
    --tw-gradient-to: rgba(250, 211, 78, 0) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

html body .to-sky-600,
html body .to-blue-600,
html body .to-teal-500,
html body .to-teal-600,
html body .to-cyan-500,
html body .to-pink-600,
html body .to-purple-600,
html body .to-indigo-600,
html body .hover\:to-sky-700:hover,
html body .hover\:to-blue-700:hover,
html body .hover\:to-pink-700:hover,
html body .hover\:to-pink-500:hover {
    --tw-gradient-to: var(--front-yellow-hover) !important;
}

html body [style*="#0ea5e9"],
html body [style*="#0284c7"],
html body [style*="#0369a1"],
html body [style*="#3498db"] {
    color: var(--front-yellow-deep) !important;
    border-color: var(--front-yellow-border) !important;
}

html body [style*="background: #0ea5e9"],
html body [style*="background:#0ea5e9"],
html body [style*="background-color: #0ea5e9"],
html body [style*="background-color:#0ea5e9"],
html body [style*="background: #0284c7"],
html body [style*="background:#0284c7"],
html body [style*="background-color: #0284c7"],
html body [style*="background-color:#0284c7"],
html body [style*="background: #3498db"],
html body [style*="background:#3498db"],
html body [style*="background-color: #3498db"],
html body [style*="background-color:#3498db"],
html body [style*="background: #14b8a6"],
html body [style*="background:#14b8a6"],
html body [style*="background-color: #14b8a6"],
html body [style*="background-color:#14b8a6"],
html body [style*="background: #0d9488"],
html body [style*="background:#0d9488"],
html body [style*="background-color: #0d9488"],
html body [style*="background-color:#0d9488"] {
    background: var(--front-yellow) !important;
    background-color: var(--front-yellow) !important;
    color: var(--front-yellow-ink) !important;
    border-color: var(--front-yellow) !important;
}

html body [style*="background: #e0f2fe"],
html body [style*="background:#e0f2fe"],
html body [style*="background-color: #e0f2fe"],
html body [style*="background-color:#e0f2fe"],
html body [style*="background: rgba(14, 165, 233"],
html body [style*="background:rgba(14,165,233"],
html body [style*="background-color: rgba(14, 165, 233"],
html body [style*="background-color:rgba(14,165,233"],
html body [style*="background: rgba(20, 184, 166"],
html body [style*="background:rgba(20,184,166"],
html body [style*="background-color: rgba(20, 184, 166"],
html body [style*="background-color:rgba(20,184,166"] {
    background: var(--front-yellow-soft) !important;
    background-color: var(--front-yellow-soft) !important;
    color: var(--front-yellow-deep) !important;
}

html body [style*="rgba(14, 165, 233"],
html body [style*="rgba(14,165,233"],
html body [style*="rgba(52, 152, 219"],
html body [style*="rgba(52,152,219"] {
    border-color: var(--front-yellow-border) !important;
}

html body .border-sky-100,
html body .border-sky-200,
html body .border-sky-200\/80,
html body .border-blue-100,
html body .border-blue-200,
html body .border-cyan-100,
html body .border-teal-100,
html body .border-indigo-100,
html body .border-purple-100,
html body .border-pink-500\/30,
html body .border-pink-500\/50,
html body .border-pink-500\/70,
html body .border-pink-600\/30,
html body .border-pink-600\/50,
html body .border-pink-600\/70,
html body .border-pink-700\/50,
html body .border-pink-800\/30,
html body .border-white\/10,
html body .border-white\/20,
html body .header-container,
html body .province-panel,
html body .category-tab,
html body .video-wrapper,
html body .goods-card,
html body .browser-address:focus,
html body .cert-type-select:focus,
html body .form-input:focus,
html body .input-style:focus {
    border-color: var(--front-yellow-border) !important;
}

html body input:focus,
html body textarea:focus,
html body select:focus,
html body .form-input:focus,
html body .input-style:focus,
html body .province-search-input:focus {
    border-color: var(--front-yellow) !important;
    box-shadow: 0 0 0 3px rgba(250, 211, 78, 0.24) !important;
    outline: none !important;
}

html body .focus\:ring-sky-500:focus,
html body .focus\:ring-blue-500:focus,
html body .focus\:ring-pink-500:focus,
html body .focus\:ring-purple-500:focus,
html body .focus\:ring-teal-500:focus,
html body .focus\:border-sky-500:focus,
html body .focus\:border-blue-500:focus,
html body .focus\:border-pink-500:focus,
html body .focus\:border-purple-500:focus {
    --tw-ring-color: rgba(250, 211, 78, 0.32) !important;
    border-color: var(--front-yellow) !important;
}

html body input,
html body textarea,
html body select,
html body .form-input,
html body .input-style,
html body .browser-address,
html body .browser-btn,
html body .cert-type-select,
html body .editable-amount,
html body .search-form input,
html body .search-form select {
    background-color: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(148, 163, 184, 0.34) !important;
    color: #0f172a !important;
}

html body input[type="file"]::file-selector-button,
html body input[type="file"]::-webkit-file-upload-button {
    background-color: var(--front-yellow-soft) !important;
    color: var(--front-yellow-deep) !important;
    border-color: transparent !important;
}

html body .language-btn,
html body .language-menu,
html body #languageMenu {
    background-color: rgba(255, 255, 255, 0.96) !important;
    border-color: var(--front-yellow-border) !important;
    color: #0f172a !important;
    box-shadow: 0 14px 34px rgba(63, 47, 5, 0.10) !important;
}

html body .language-item:hover,
html body .language-item[style*="rgba(14, 165, 233"] {
    background-color: var(--front-yellow-soft) !important;
    color: var(--front-yellow-deep) !important;
}

html body #customerServiceFloat .customer-service-main {
    border-color: rgba(250, 211, 78, 0.56) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 247, 216, 0.96)) !important;
    color: var(--front-yellow-deep) !important;
    box-shadow: 0 18px 38px rgba(183, 121, 0, 0.18), 0 6px 14px rgba(15, 23, 42, 0.08) !important;
}

html body #customerServiceFloat .customer-service-main i {
    color: var(--front-yellow-deep) !important;
}

html body #customerServiceFloat .customer-service-close:hover {
    background: var(--front-yellow-soft) !important;
    color: var(--front-yellow-ink) !important;
}

html body .nav-item {
    color: #334155 !important;
}

html body .nav-item.active,
html body .nav-item:not(.active):hover {
    background-color: var(--front-yellow-soft) !important;
    color: var(--front-yellow-deep) !important;
}

html body .table-header .header-item {
    box-shadow: none !important;
}

html body .new-badge,
html body .auth-ribbon,
html body .bg-emerald-50,
html body .text-emerald-700,
html body .bg-rose-50,
html body .text-rose-700,
html body .text-red-400,
html body .text-red-500,
html body .text-red-600,
html body .text-green-300,
html body .text-green-400,
html body .text-green-500,
html body .text-green-600 {
    box-shadow: none;
}