:root {
    --ui-font-sans: "Outfit", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --ui-font-mono: "JetBrains Mono", Consolas, monospace;

    --ui-bg-base: #050a18;
    --ui-bg-surface: #0f1930;
    --ui-bg-elevated: #162543;
    --ui-bg-soft: #0c162a;

    --ui-text-main: #f2f7ff;
    --ui-text-muted: #a5b7d3;
    --ui-text-soft: #8298b9;

    --ui-brand: #3b82f6;
    --ui-brand-strong: #2563eb;
    --ui-accent: #8ab8ff;
    --ui-warn: #f6c96b;
    --ui-danger: #f87171;

    --ui-border: rgba(255, 255, 255, 0.1);
    --ui-border-strong: rgba(138, 184, 255, 0.46);

    --ui-radius-sm: 12px;
    --ui-radius-md: 18px;
    --ui-radius-lg: 22px;
    --ui-radius-pill: 999px;

    --ui-shadow-card: 0 16px 34px rgba(3, 10, 20, 0.4);
    --ui-shadow-soft: 0 10px 26px rgba(6, 14, 28, 0.3);
    --ui-shadow-glow: 0 0 0 1px rgba(138, 184, 255, 0.36), 0 18px 34px rgba(7, 16, 31, 0.46);

    --ui-grad-app:
        radial-gradient(75% 80% at 100% 0%, rgba(59, 130, 246, 0.24) 0%, rgba(59, 130, 246, 0) 72%),
        radial-gradient(90% 100% at 0% 100%, rgba(56, 189, 248, 0.14) 0%, rgba(56, 189, 248, 0) 70%),
        linear-gradient(180deg, #050a18 0%, #0a1326 48%, #101d36 100%);
}

.ui-card {
    border-radius: var(--ui-radius-md);
    border: 1px solid var(--ui-border);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
    box-shadow: var(--ui-shadow-card);
    backdrop-filter: blur(7px);
}

.ui-section-title {
    font-family: var(--ui-font-sans);
    font-size: clamp(18px, 4.8vw, 24px);
    line-height: 1.15;
    font-weight: 700;
    color: var(--ui-text-main);
    letter-spacing: 0.02em;
}

.ui-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: var(--ui-radius-pill);
    border: 1px solid rgba(145, 183, 224, 0.38);
    background: rgba(30, 53, 82, 0.62);
    color: #d7e8ff;
    font-size: 12px;
    font-weight: 600;
}

.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--ui-radius-sm);
    border: 1px solid transparent;
    min-height: 44px;
    padding: 0 14px;
    font-family: var(--ui-font-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: transform 0.15s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

.ui-btn:active {
    transform: translateY(1px);
}

.ui-btn-primary {
    border-color: rgba(138, 184, 255, 0.5) !important;
    background: linear-gradient(135deg, var(--ui-brand), var(--ui-brand-strong)) !important;
    color: #eef4ff !important;
    box-shadow: var(--ui-shadow-glow);
}

.ui-btn-ghost {
    border-color: rgba(255, 255, 255, 0.14) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)) !important;
    color: #dbe8ff !important;
}

.ui-btn-danger {
    border-color: rgba(234, 91, 97, 0.55) !important;
    background: linear-gradient(180deg, rgba(111, 33, 40, 0.96), rgba(84, 23, 32, 0.96)) !important;
    color: #ffdce1 !important;
}

.ui-btn-icon {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border-radius: 12px;
}

.ui-input {
    min-height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(6, 12, 24, 0.58) !important;
    color: #edf5ff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 0 1px rgba(7, 16, 30, 0.2);
}

.ui-input::placeholder {
    color: var(--ui-text-soft);
}

.ui-input:focus {
    outline: none;
    border-color: rgba(64, 166, 255, 0.62) !important;
    box-shadow: 0 0 0 3px rgba(64, 166, 255, 0.15);
}

.ui-tabs {
    padding: 4px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    background: rgba(10, 18, 34, 0.76);
}

.ui-tab {
    min-height: 36px;
    border-radius: 10px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #94abc7 !important;
    font-size: 13px;
    font-weight: 600;
}

.ui-tab.active,
.ui-tab.is-active {
    border-color: rgba(64, 166, 255, 0.58) !important;
    background: linear-gradient(135deg, rgba(64, 166, 255, 0.24), rgba(36, 83, 133, 0.24)) !important;
    color: #e9f4ff !important;
    box-shadow: 0 4px 10px rgba(12, 25, 41, 0.35);
}

.ui-stat-card {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.016));
    box-shadow: var(--ui-shadow-soft);
}

.ui-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 16px;
    border-radius: 14px;
    border: 1px dashed rgba(138, 184, 255, 0.35);
    background: rgba(10, 19, 35, 0.46);
    text-align: center;
}

.ui-empty-state--compact {
    padding: 16px 12px;
}

.ui-empty-icon {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(43, 88, 140, 0.28);
    color: #d9ecff;
    font-size: 20px;
}

.ui-empty-title {
    color: var(--ui-text-main);
    font-size: 14px;
    font-weight: 700;
}

.ui-empty-desc {
    color: var(--ui-text-muted);
    font-size: 12px;
    line-height: 1.5;
}

.ui-bottom-nav-item {
    border-radius: 14px;
    border: 1px solid transparent;
    color: #9bb0ca;
}

.ui-bottom-nav-item.active {
    border-color: rgba(64, 166, 255, 0.46);
    background: linear-gradient(180deg, rgba(58, 134, 212, 0.2), rgba(36, 80, 124, 0.2));
    color: #edf5ff;
}

.ui-text-main {
    color: var(--ui-text-main);
}

.ui-text-muted {
    color: var(--ui-text-muted);
}

.page-home-v2,
.page-trade-v2,
.page-coupon-v2 {
    background-image: var(--ui-grad-app);
}

.page-home-v2 .cm-home-topbar,
.page-trade-v2 .trade-page-header,
.page-coupon-v2 .coupon-top-nav {
    backdrop-filter: blur(8px);
    background: linear-gradient(180deg, rgba(10, 22, 38, 0.95), rgba(10, 20, 34, 0.86));
    border-bottom-color: rgba(125, 163, 205, 0.28);
}

.page-home-v2 .cm-home-feature-item {
    padding: 14px;
}

.page-home-v2 .cm-home-feature-title {
    color: #eaf5ff;
    font-size: 15px;
    font-weight: 700;
}

.page-home-v2 .cm-home-feature-item p {
    margin-top: 6px;
    color: var(--ui-text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.page-home-v2 .cm-carbon-copy,
.page-home-v2 .cm-home-sec-copy,
.page-home-v2 .cm-home-news-copy {
    color: var(--ui-text-muted);
}

.page-trade-v2 .trade-scroll-area {
    gap: 16px;
}

.page-trade-v2 .trade-quote-card {
    padding: 10px;
}

.page-trade-v2 .trade-quote-item {
    padding: 10px;
}

.page-trade-v2 .trade-quote-value {
    font-family: var(--ui-font-mono);
}

.page-coupon-v2 .coupon-shell {
    gap: 14px;
}

.page-coupon-v2 .reward-wheel-disc {
    box-shadow: 0 0 0 3px rgba(70, 120, 178, 0.35), 0 16px 34px rgba(3, 10, 19, 0.45);
}

.page-coupon-v2 .reward-mall-item {
    padding: 12px;
}

.page-coupon-v2 .coupon-card-desc {
    color: var(--ui-text-muted);
}

.page-profile-v2,
.page-events-v2,
.page-support-v2,
.page-funding-v2,
.page-security-v2,
.page-about-v2,
.page-service-v2,
.page-funding-account-v2 {
    background-image: var(--ui-grad-app);
}

.page-profile-v2 .profile-center-top,
.page-events-v2 .event-content,
.page-support-v2 .support-content-section,
.page-funding-v2 .funding-shell,
.page-security-v2 .security-shell,
.page-about-v2 .about-shell,
.page-service-v2 .service-shell,
.page-funding-account-v2 .funding-account-shell {
    backdrop-filter: blur(6px);
}

.page-profile-v2 .profile-section,
.page-profile-v2 .profile-center-user,
.page-profile-v2 .profile-center-asset,
.page-profile-v2 .menu-group {
    border-color: rgba(126, 166, 209, 0.34);
}

.page-events-v2 .event-timer-card,
.page-events-v2 .event-my-stats {
    border-color: rgba(126, 166, 209, 0.36);
}

.page-events-v2 .event-entry-switch {
    margin-bottom: 10px;
}

.page-events-v2 .event-stat-card {
    min-height: 76px;
}

.page-support-v2 .support-category-grid {
    gap: 10px;
}

.page-support-v2 .support-category-card {
    text-align: left;
    padding: 14px;
    min-height: 92px;
}

.page-support-v2 .support-chat-fab {
    min-height: 42px;
}

.page-funding-v2 .funding-card,
.page-security-v2 .security-card,
.page-about-v2 .about-brand-card,
.page-about-v2 .about-list-card,
.page-about-v2 .about-version-card,
.page-service-v2 .service-card,
.page-funding-account-v2 .funding-account-overview,
.page-funding-account-v2 .funding-account-list-card,
.page-funding-account-v2 .funding-account-history-card {
    border-color: rgba(126, 166, 209, 0.34);
}

.page-funding-v2 .funding-select-wrap select,
.page-security-v2 .security-input-wrap input {
    width: 100%;
}

.page-funding-v2 .funding-inline-btn,
.page-funding-v2 .funding-copy-btn,
.page-funding-v2 .funding-addressbook-btn {
    min-height: 34px;
    padding: 0 10px;
    font-size: 12px;
}

.page-security-v2 .security-head-row {
    align-items: center;
    gap: 8px;
}

.page-security-v2 .security-add-btn,
.page-security-v2 .security-change-btn,
.page-security-v2 .security-main-btn {
    width: 100%;
}

.page-about-v2 .about-item {
    min-height: 52px;
}

.page-service-v2 .service-main-btn,
.page-service-v2 .service-sub-btn {
    width: 100%;
}

.page-funding-account-v2 .funding-account-row {
    margin-bottom: 8px;
}

.page-funding-account-v2 .funding-account-row:last-child {
    margin-bottom: 0;
}