/* 彩票网站 - 移动端样式 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --primary-red: #E63935;
    --primary-blue: #3B82F6;
    --primary-blue-light: #4FC3F7;
    --bg-gray: #F5F5F5;
    --bg-page: #F8F8F8;
    --text-dark: #333;
    --text-gray: #999;
    --text-light: #ccc;
    --white: #fff;
    --gold: #C9A227;
    --green: #4CAF50;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 2px 8px rgba(0,0,0,0.06);
    --nav-height: 56px;
    --header-height: 48px;
}

html { font-size: 14px; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    background: var(--bg-page);
    color: var(--text-dark);
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    padding-bottom: calc(var(--nav-height) + 10px);
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { border: none; cursor: pointer; font-family: inherit; }
input { font-family: inherit; border: none; outline: none; }

/* ===== Header ===== */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--white);
}
.header-red {
    background: var(--primary-red);
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--header-height);
    position: relative;
}
.header-home-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: calc(100% - 24px);
    padding: 0 12px;
    min-width: 0;
    height: 100%;
}
.header-home-logo {
    height: calc(var(--header-height) * 0.8);
    width: auto;
    max-width: min(160px, 42vw);
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}
.header-home-brand--logo-only .header-home-logo {
    max-width: min(280px, 72vw);
}
.header-red .header-title {
    color: var(--white);
    font-size: 18px;
    font-weight: 600;
}
.header-red .header-title-home {
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.header-service {
    position: absolute;
    right: 12px;
    background: var(--white);
    color: var(--primary-red);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.header-promo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--white);
}
.header-promo .header-title-left {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-dark);
}
.header-user {
    display: flex;
    align-items: center;
    gap: 6px;
}
.balance-text { font-weight: 700; color: var(--gold); font-size: 15px; }
.balance-text-sm { font-weight: 600; color: var(--gold); font-size: 13px; }

.header-records {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    background: var(--white);
}
.records-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-dark);
}

.header-sub {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    padding: 0 8px;
    background: var(--white);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
.back-btn,
[data-nav-back] {
    position: relative;
    z-index: 1;
    font-size: 28px;
    color: var(--text-dark);
    width: 40px;
    line-height: 1;
    text-decoration: none;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}
.header-title-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100% - 96px);
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}
.header-right {
    position: relative;
    z-index: 1;
    min-width: 40px;
    text-align: right;
}
.header-link { color: var(--primary-blue); font-size: 13px; }
.header-spacer { width: 40px; }
.header-user-mini { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }

/* ===== Avatar ===== */
.avatar {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #FF9800, #FF5722);
    color: white;
    font-size: 20px;
    flex-shrink: 0;
}
.avatar-sm { width: 32px; height: 32px; font-size: 16px; }
.avatar-xs { width: 24px; height: 24px; font-size: 12px; }
.avatar-lg { width: 72px; height: 72px; font-size: 36px; }

.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    box-sizing: border-box;
}
.user-avatar.avatar-lg {
    width: 72px;
    height: 72px;
}
.user-avatar.avatar-xs {
    width: 24px;
    height: 24px;
    font-size: 12px;
}
.user-avatar--fallback {
    background: linear-gradient(135deg, #FF9800, #FF5722);
    color: #fff;
}
.user-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.user-avatar-fallback {
    line-height: 1;
}

/* ===== Bottom Nav ===== */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    height: var(--nav-height);
    background: var(--white);
    display: flex;
    align-items: stretch;
    border-top: 1px solid #eee;
    z-index: 200;
    box-sizing: border-box;
}
.bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    height: var(--nav-height);
    color: #999;
    font-size: 11px;
    text-decoration: none;
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    box-sizing: border-box;
    user-select: none;
}
.bottom-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    color: inherit;
    background: transparent;
    box-shadow: none;
}
.bottom-nav-icon svg {
    width: 20px;
    height: 20px;
    display: block;
    flex-shrink: 0;
}
.bottom-nav-icon--img {
    background: transparent;
    box-shadow: none;
}
.bottom-nav-img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}
.bottom-nav-label {
    display: block;
    line-height: 1.2;
    height: 14px;
    flex: 0 0 14px;
    font-weight: 500;
}
.bottom-nav-item.active {
    color: var(--primary-red);
}
.bottom-nav-item.active .bottom-nav-icon {
    background: var(--primary-red);
    color: #fff;
    box-shadow: 0 2px 8px rgba(230, 57, 53, 0.28);
}
.bottom-nav-item.active .bottom-nav-icon--img {
    background: transparent;
    box-shadow: none;
}
.bottom-nav-item.active .bottom-nav-img {
    transform: scale(1.06);
}
.bottom-nav-item:active {
    opacity: 0.88;
}

/* ===== Home Page ===== */
.banner-section {
    padding: 12px 14px 0;
    background: var(--white);
}
.banner-carousel {
    margin: 0;
    position: relative;
    overflow: hidden;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
}
.banner-track {
    display: flex;
    transition: transform 0.35s ease;
    will-change: transform;
}
.banner-slide {
    flex: 0 0 100%;
    width: 100%;
    min-height: 150px;
    position: relative;
    overflow: hidden;
    user-select: none;
    -webkit-user-drag: none;
}
.banner-slide--default {
    background: linear-gradient(135deg, #FFF5E6, #FFE0B2);
    padding: 20px 16px;
    display: flex;
    align-items: center;
}
.banner-slide-img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
    pointer-events: none;
    border-radius: 12px;
}
.banner-slide--link {
    cursor: pointer;
}
.banner-content { flex: 1; z-index: 1; }
.banner-tag {
    display: inline-block;
    background: var(--primary-red);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    margin-bottom: 8px;
}
.banner-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--primary-red);
    line-height: 1.3;
}
.banner-subtitle {
    font-size: 16px;
    color: var(--primary-red);
    margin-top: 4px;
}
.banner-image {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 60px;
    opacity: 0.8;
}
.banner-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 0;
    z-index: 2;
    pointer-events: none;
}
.banner-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    border: none;
    padding: 0;
    cursor: pointer;
    pointer-events: auto;
    transition: width 0.2s, background 0.2s;
}
.banner-dot.active {
    background: var(--primary-red);
    width: 16px;
    border-radius: 3px;
}

.announcement-bar {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    margin: 10px 14px 0;
    background: #fff;
    gap: 10px;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}
.announce-icon-badge {
    position: relative;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: linear-gradient(145deg, #FF9A76 0%, #E63935 52%, #C62828 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(230, 57, 53, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    overflow: hidden;
}
.announce-icon-badge::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    right: 5px;
    height: 11px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    pointer-events: none;
}
.announce-icon-badge svg {
    position: relative;
    width: 16px;
    height: 16px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12));
}
.announcement-icon-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.announcement-icon-wrap svg {
    width: 18px;
    height: 18px;
}
.announcement-text {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    font-size: 12px;
    color: #5a6270;
    line-height: 1.4;
}
.announcement-text span {
    display: inline-block;
    padding-left: 100%;
    animation: scroll 20s linear infinite;
}
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}
.announcement-view {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--primary-red);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 2px;
    cursor: pointer;
}

/* ===== Announcement Modal ===== */
.announcement-modal {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.announcement-modal[hidden] {
    display: none;
}
.announcement-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}
.announcement-modal-panel {
    position: relative;
    width: 100%;
    max-width: 340px;
    background: #fff;
    border-radius: 16px;
    padding: 24px 20px 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    max-height: 70vh;
}
.announcement-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1d26;
    text-align: center;
    margin-bottom: 16px;
}
.announcement-modal-body {
    flex: 1;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.7;
    color: #4a4f5c;
    text-align: center;
    padding: 0 4px 16px;
    word-break: break-word;
}
.announcement-modal-btn {
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: 10px;
    background: var(--primary-red);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.announcement-modal-btn:active {
    opacity: 0.9;
}

.quick-grid-wrap {
    padding: 14px;
    background: #fff;
}
.quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05);
}
.quick-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 82px;
    padding: 14px 4px 12px;
    color: #4a4f5c;
    text-decoration: none;
    background: #fff;
    transition: background 0.2s;
}
.quick-item:active {
    background: #f8f9fb;
}
.quick-item {
    border-right: 1px solid #f0f2f5;
}
.quick-item:last-child {
    border-right: none;
}
.quick-item .mine-action-icon {
    width: 42px;
    height: 42px;
}
.quick-item .mine-action-icon svg {
    width: 22px;
    height: 22px;
}
.quick-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2px;
    white-space: nowrap;
    line-height: 1.2;
    color: #4a4f5c;
}

/* ===== Home Quick Bar ===== */
.home-quick-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 14px 14px 0;
    padding: 12px 10px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05);
}
.home-user-panel {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
.home-user-panel-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}
.home-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffb74d 0%, #ff7043 55%, #f4511e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(255, 112, 67, 0.28);
    overflow: hidden;
}
.home-user-avatar .user-avatar {
    width: 100%;
    height: 100%;
    font-size: 24px;
    box-shadow: none;
}
.home-user-avatar .user-avatar--fallback {
    background: transparent;
}
.home-user-info {
    min-width: 0;
    flex: 1;
}
.home-user-name {
    font-size: 14px;
    font-weight: 700;
    color: #1a1d26;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.home-user-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    flex-wrap: nowrap;
    min-width: 0;
}
.home-user-balance {
    font-size: 13px;
    font-weight: 700;
    color: #e53935;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}
.home-user-vip {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #ffd54f 0%, #ff9800 100%);
    flex-shrink: 0;
}
.home-auth-btns {
    display: flex;
    align-items: center;
    gap: 8px;
}
.home-auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    border-radius: 22px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.home-auth-btn--primary {
    background: linear-gradient(135deg, #e53935, #ef5350);
    color: #fff;
    box-shadow: 0 4px 12px rgba(229, 57, 53, 0.25);
}
.home-auth-btn--outline {
    background: #fff;
    color: #e53935;
    border: 1px solid #ffcdd2;
}
.home-auth-btn:active {
    opacity: 0.92;
}
.home-quick-actions {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 0 0 auto;
    flex-shrink: 0;
    padding: 0;
}
.home-quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 40px;
    flex: 0 0 40px;
    padding: 2px 0 0;
    text-decoration: none;
    color: #4a4f5c;
    background: transparent;
    border-radius: 12px;
    transition: background 0.2s, transform 0.15s;
}
.home-quick-item:active {
    background: #f3f5f8;
    transform: scale(0.96);
}
.home-quick-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.65);
}
.home-quick-icon svg {
    width: 20px;
    height: 20px;
}
.home-quick-icon--cyan {
    background: linear-gradient(145deg, #e0f7fa 0%, #80deea 100%);
    color: #006978;
    box-shadow: 0 4px 14px rgba(0, 172, 193, 0.22);
}
.home-quick-icon--gold {
    background: linear-gradient(145deg, #fff8e1 0%, #ffd54f 100%);
    color: #e65100;
    box-shadow: 0 4px 14px rgba(255, 143, 0, 0.22);
}
.home-quick-icon--orange {
    background: linear-gradient(145deg, #fff3e0 0%, #ffcc80 100%);
    color: #e65100;
    box-shadow: 0 4px 14px rgba(245, 124, 0, 0.22);
}
.home-quick-icon--blue {
    background: linear-gradient(145deg, #e3f2fd 0%, #90caf9 100%);
    color: #1565c0;
    box-shadow: 0 4px 14px rgba(30, 136, 229, 0.22);
}
.home-quick-bar .home-quick-icon {
    box-shadow: none;
    border: none;
    overflow: hidden;
    width: 36px;
    height: 36px;
    border-radius: 12px;
}
.home-quick-bar .home-quick-icon svg {
    width: 22px;
    height: 22px;
}
.home-quick-bar .home-quick-icon--cyan,
.home-quick-bar .home-quick-icon--gold,
.home-quick-bar .home-quick-icon--orange,
.home-quick-bar .home-quick-icon--blue {
    background: linear-gradient(160deg, #fff5f5 0%, #ffebee 100%);
}
.home-quick-icon--yuebao {
    background: linear-gradient(145deg, #ffebee 0%, #ef9a9a 100%);
    color: #c62828;
    box-shadow: 0 4px 14px rgba(229, 57, 53, 0.22);
}
.home-quick-label {
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.2;
    color: #5a6270;
    letter-spacing: 0;
    transform: scale(0.95);
    transform-origin: center top;
}

/* 大屏略放大，仍保持单行 */
@media (min-width: 400px) {
    .home-quick-bar {
        gap: 10px;
        padding: 12px 14px;
    }
    .home-user-panel-link {
        gap: 10px;
    }
    .home-user-avatar {
        width: 44px;
        height: 44px;
    }
    .home-quick-item {
        width: 48px;
        flex: 0 0 48px;
        gap: 5px;
    }
    .home-quick-bar .home-quick-icon {
        width: 40px;
        height: 40px;
    }
    .home-quick-bar .home-quick-icon svg {
        width: 24px;
        height: 24px;
    }
    .home-quick-label {
        font-size: 11px;
        transform: none;
    }
}

@media (max-width: 360px) {
    .home-quick-bar {
        margin: 10px 8px 0;
        padding: 10px 6px;
        gap: 4px;
    }
    .home-user-panel-link {
        gap: 6px;
    }
    .home-user-avatar {
        width: 36px;
        height: 36px;
    }
    .home-user-name {
        font-size: 13px;
    }
    .home-user-balance {
        font-size: 12px;
    }
    .home-quick-item {
        width: 36px;
        flex: 0 0 36px;
        gap: 3px;
    }
    .home-quick-bar .home-quick-icon {
        width: 32px;
        height: 32px;
        border-radius: 10px;
    }
    .home-quick-bar .home-quick-icon svg {
        width: 20px;
        height: 20px;
    }
    .home-quick-label {
        font-size: 9px;
        transform: scale(0.9);
    }
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 12px 10px;
    background: #f0f4fa;
}
.section-title { font-size: 16px; font-weight: 700; color: #1a1d26; }
.section-more {
    color: var(--text-gray);
    font-size: 13px;
    text-decoration: none;
}
.section-more:active {
    opacity: 0.7;
}

/* ===== 热门彩票卡片 ===== */
.hot-lottery-section {
    background: #f0f4fa;
    padding: 0 12px 16px;
}
.hot-lottery-card {
    display: block;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    margin-bottom: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}
.hot-lottery-card:last-child {
    margin-bottom: 0;
}
.hl-card-top {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 12px 10px;
}
.hl-card-top--race {
    align-items: flex-start;
}
.hl-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #fff;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.hl-icon--k3 {
    background: linear-gradient(145deg, #ffd54f, #ff8f00);
    font-size: 22px;
}
.hl-icon--k3-fast {
    background: linear-gradient(145deg, #ffb74d, #f57c00);
    font-size: 22px;
}
.hot-lottery-card--fast {
    margin-top: 12px;
}
.hl-icon--k3.hl-icon--image,
.hl-icon--k3-fast.hl-icon--image {
    background: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}
.hl-icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hl-icon-dice {
    filter: brightness(10);
    line-height: 1;
}
.hl-icon--ca28 {
    background: linear-gradient(145deg, #ff80ab, #e040fb);
    font-size: 16px;
}
.hl-icon--race {
    background: linear-gradient(145deg, #26c6da, #00897b);
    font-size: 20px;
}
.hl-main {
    flex: 1;
    min-width: 0;
}
.hl-title-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.hl-name {
    font-size: 16px;
    font-weight: 700;
    color: #1a1d26;
}
.hl-issue {
    font-size: 11px;
    color: #9aa3b2;
}
.hl-timer {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #bfd0ef;
    background: conic-gradient(#3b82f6 calc(var(--progress, 0) * 1%), #edf2fa 0);
    position: relative;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.12);
}
.hl-timer::before {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e8eef8;
}
.hl-timer-text {
    position: relative;
    z-index: 1;
    font-size: 12px;
    font-weight: 700;
    color: #3b82f6;
    line-height: 1;
}
.hl-result--dice {
    display: flex;
    gap: 8px;
    align-items: center;
}
.hl-result--dice .k3-die--home {
    --die-size: 30px;
    --pip-size: 5px;
}
.hl-dice-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
}
.hl-table td .k3-die--table {
    --die-size: 24px;
    --pip-size: 4.5px;
}
.hl-table td .k3-odds-dice--pair .k3-die--table {
    --die-size: 21px;
    --pip-size: 4px;
}
.hl-table td .k3-odds-dice--triple .k3-die--table {
    --die-size: 18px;
    --pip-size: 3.5px;
}
.hl-table td .k3-odds-dice--pair,
.hl-table td .k3-odds-dice--triple {
    gap: 3px;
}
.hl-table td .k3-odds-dice--single .k3-die--table {
    --die-size: 24px;
    --pip-size: 4.5px;
}
.hl-table .k3-prev-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}
.hl-table .k3-prev-tag--big {
    color: #e53935;
    background: rgba(229, 57, 53, 0.1);
}
.hl-table .k3-prev-tag--small {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}
.hl-table .k3-prev-tag--odd {
    color: #e53935;
    background: rgba(229, 57, 53, 0.1);
}
.hl-table .k3-prev-tag--even {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}
.hl-dice {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: linear-gradient(145deg, #fff, #f0f0f0);
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
}
.hl-dice-face {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #333;
}
.hl-mini-dice.hl-dice-face {
    font-size: 10px;
    font-weight: 700;
    color: #333;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hl-dice-3::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle, #333 2.5px, transparent 2.5px) 20% 20% / 33% 33%,
        radial-gradient(circle, #333 2.5px, transparent 2.5px) 50% 50% / 33% 33%,
        radial-gradient(circle, #333 2.5px, transparent 2.5px) 80% 80% / 33% 33%;
    background-repeat: no-repeat;
}
.hl-dice-5::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle, #333 2.5px, transparent 2.5px) 20% 20% / 33% 33%,
        radial-gradient(circle, #333 2.5px, transparent 2.5px) 80% 20% / 33% 33%,
        radial-gradient(circle, #333 2.5px, transparent 2.5px) 50% 50% / 33% 33%,
        radial-gradient(circle, #333 2.5px, transparent 2.5px) 20% 80% / 33% 33%,
        radial-gradient(circle, #333 2.5px, transparent 2.5px) 80% 80% / 33% 33%;
    background-repeat: no-repeat;
}
.hl-mini-dice {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    vertical-align: middle;
    margin: 0 1px;
    position: relative;
}
.hl-mini-dice.hl-dice-3::after,
.hl-mini-dice.hl-dice-5::after {
    transform: scale(0.55);
    transform-origin: center;
}
.hl-result--ca28 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
.hl-ball {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    border: 2px solid;
}
.hl-ball--blue {
    color: #3b82f6;
    border-color: #3b82f6;
    background: #eff6ff;
}
.hl-ball--red {
    color: #ef4444;
    border-color: #ef4444;
    background: #fef2f2;
}
.hl-op {
    font-size: 14px;
    color: #3b82f6;
    font-weight: 600;
}
.hl-result--race {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.hl-race-balls {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.hl-race-ball {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: var(--c);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.hl-race-sum {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.hl-race-sum-label {
    font-size: 12px;
    color: #666;
    margin-right: 2px;
}
.hl-pill {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid #ddd;
    color: #666;
    background: #fafafa;
}
.hl-pill--blue {
    color: #3b82f6;
    border-color: #93c5fd;
    background: #eff6ff;
}
.hl-table-wrap {
    margin: 0 10px 12px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e8eef8;
}
.hl-table-wrap--race {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.hl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    text-align: center;
}
.hl-table--race {
    min-width: 520px;
}
.hl-table thead th {
    background: #eef4ff;
    color: #4a68b1;
    font-weight: 600;
    padding: 8px 4px;
    border-bottom: 1px solid #dce6f5;
    white-space: nowrap;
}
.hl-table tbody td {
    padding: 10px 4px;
    color: #333;
    border-bottom: 1px solid #f0f2f5;
    background: #fff;
    text-align: center;
    vertical-align: middle;
}
.hl-table tbody tr:last-child td {
    border-bottom: none;
}
.hl-table--k3 .hl-issue-cell {
    font-size: 10px;
    color: #5b6b8a;
    font-weight: 600;
    white-space: nowrap;
}
.hl-table-placeholder {
    color: #9ca3af;
    padding: 16px 4px !important;
}
.hl-table .hl-blue { color: #3b82f6; font-weight: 600; }
.hl-table .hl-red { color: #ef4444; font-weight: 600; }
.hl-race-status td {
    font-size: 10px;
    padding: 6px 2px;
}
.hl-race-nums td {
    font-weight: 600;
    font-size: 12px;
}

/* ===== Promotions Page ===== */
.category-tabs {
    overflow-x: auto;
    background: var(--white);
    border-bottom: 1px solid #f0f0f0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 12px;
    box-sizing: border-box;
}
.category-tabs::-webkit-scrollbar { display: none; }
.category-tabs-track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.category-tab {
    padding: 12px 14px;
    font-size: 14px;
    color: var(--text-gray);
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
}
.category-tab.active {
    color: var(--primary-red);
    font-weight: 600;
}
.category-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    background: var(--primary-red);
    border-radius: 2px;
}

.promo-list { padding: 12px; }
.promo-card {
    display: block;
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
}
.promo-card-banner {
    position: relative;
    height: 140px;
    background: linear-gradient(135deg, #FFE0B2, #FFCC80);
    display: flex;
    align-items: center;
    padding: 16px;
    border: 2px solid var(--primary-red);
    border-radius: var(--radius);
    margin: 8px;
    overflow: hidden;
}
.promo-card-banner--image {
    padding: 0;
    border: none;
    margin: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    height: 160px;
    background: #f5f5f5;
}
.promo-card-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.promo-card-tag {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--primary-red);
    color: white;
    padding: 2px 10px;
    font-size: 11px;
    border-radius: 0 0 8px 0;
}
.promo-card-banner-text {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-red);
    line-height: 1.3;
}
.promo-card-info { padding: 10px 12px 14px; }
.promo-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}
.promo-status {
    background: #E8F5E9;
    color: var(--green);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}
.promo-card-title {
    font-size: 15px;
    font-weight: 700;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.promo-detail-page {
    min-height: 100vh;
    background: #f5f5f5;
    padding-bottom: 24px;
}
.promo-detail-banner img {
    width: 100%;
    display: block;
    max-height: 220px;
    object-fit: cover;
}
.promo-detail-body {
    margin: 12px;
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: var(--shadow);
}
.promo-detail-title {
    font-size: 18px;
    font-weight: 700;
    color: #222;
    margin-bottom: 14px;
    line-height: 1.4;
}
.promo-detail-content {
    font-size: 15px;
    color: #333;
    line-height: 1.75;
    word-break: break-word;
}
.promo-detail-content h2,
.promo-detail-content h3 {
    margin: 16px 0 10px;
    font-weight: 700;
    line-height: 1.4;
}
.promo-detail-content h2 { font-size: 17px; }
.promo-detail-content h3 { font-size: 16px; }
.promo-detail-content p {
    margin: 0 0 12px;
}
.promo-detail-content ul,
.promo-detail-content ol {
    margin: 0 0 12px 20px;
}
.promo-detail-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 8px 0;
}
.promo-detail-content a {
    color: var(--primary-blue);
    text-decoration: underline;
}
.promo-detail-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 14px;
}
.promo-detail-content table td,
.promo-detail-content table th {
    border: 1px solid #e0e0e0;
    padding: 8px 10px;
    vertical-align: top;
}
.promo-detail-content table th {
    background: #fafafa;
    font-weight: 600;
}
.promo-detail-empty {
    text-align: center;
    color: #999;
    padding: 32px 12px;
    font-size: 14px;
}

/* ===== Records Page ===== */
.date-selector {
    display: flex;
    overflow-x: auto;
    padding: 10px 0;
    background: var(--white);
    gap: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.date-selector::-webkit-scrollbar { display: none; }
.date-item {
    flex: 1;
    flex-shrink: 0;
    text-align: center;
    padding: 10px 6px;
    border: none;
    border-radius: 0;
    min-width: 0;
    cursor: pointer;
    position: relative;
    color: #5a6270;
    text-decoration: none;
    background: transparent;
    font-family: inherit;
}
.date-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 30px;
    background: linear-gradient(180deg, rgba(232, 235, 240, 0) 0%, rgba(220, 224, 232, 0.95) 50%, rgba(232, 235, 240, 0) 100%);
    pointer-events: none;
}
.date-item.active {
    background: var(--primary-red);
    color: white;
}
.date-item.active::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 100%);
}
.date-weekday { font-size: 12px; }
.date-day { font-size: 14px; font-weight: 600; margin-top: 4px; }

.filter-tabs {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: var(--white);
    border-bottom: 1px solid #f0f0f0;
}
.filter-tab {
    padding: 10px 14px;
    font-size: 14px;
    color: var(--text-gray);
    position: relative;
    cursor: pointer;
    border: none;
    background: transparent;
    font-family: inherit;
}
.filter-tab.active {
    color: var(--text-dark);
    font-weight: 600;
}
.filter-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: var(--primary-red);
}
.bet-list { padding: 12px; }
.records-app.is-loading #recordsListContent {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.records-pagination .list-page-btn {
    cursor: pointer;
}
.records-source-tabs {
    padding-top: 8px;
}
.records-range-tabs {
    padding-top: 8px;
}
.records-platform-bar {
    padding: 4px 12px 10px;
    position: relative;
    z-index: 20;
}
.records-platform-picker {
    position: relative;
}
.records-platform-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #ececec;
    border-radius: 12px;
    background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.records-platform-trigger:hover {
    border-color: #e0e0e0;
}
.records-platform-picker.is-open .records-platform-trigger {
    border-color: rgba(198, 40, 40, 0.35);
    box-shadow: 0 4px 14px rgba(198, 40, 40, 0.08);
}
.records-platform-trigger-label {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.records-platform-trigger-chevron {
    color: #999;
    display: flex;
    align-items: center;
    transition: transform 0.22s ease, color 0.2s ease;
    flex-shrink: 0;
}
.records-platform-picker.is-open .records-platform-trigger-chevron {
    transform: rotate(180deg);
    color: var(--primary-red);
}
.records-platform-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #eee;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    animation: recordsPlatformDropIn 0.22s ease;
}
@keyframes recordsPlatformDropIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.records-platform-dropdown-header {
    padding: 12px 16px 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-gray);
    letter-spacing: 0.02em;
    border-bottom: 1px solid #f5f5f5;
}
.records-platform-options {
    max-height: 240px;
    overflow-y: auto;
    padding: 6px;
    -webkit-overflow-scrolling: touch;
}
.records-platform-option {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background 0.15s ease;
}
.records-platform-option:hover {
    background: #f8f8f8;
}
.records-platform-option.active {
    background: rgba(198, 40, 40, 0.06);
}
.records-platform-option-name {
    font-size: 14px;
    color: var(--text-dark);
    font-weight: 500;
}
.records-platform-option.active .records-platform-option-name {
    color: var(--primary-red);
    font-weight: 600;
}
.records-platform-option-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    background: transparent;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}
.records-platform-option.active .records-platform-option-check {
    color: #fff;
    background: var(--primary-red);
}
.bet-source-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    border-radius: 4px;
    vertical-align: middle;
}
.bet-source-tag--lottery {
    color: #c62828;
    background: rgba(198, 40, 40, 0.1);
}
.bet-source-tag--tp {
    color: #1565c0;
    background: rgba(21, 101, 192, 0.1);
}
.game-record-card .bet-game-icon {
    font-size: 14px;
}
.summary-bar--entertainment {
    grid-template-columns: repeat(3, 1fr);
}
.bet-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 10px;
    box-shadow: var(--shadow);
}
.bet-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.bet-game-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-blue-light);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}
.bet-game-icon--image {
    background: none;
    overflow: hidden;
}
.bet-game-icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.bet-game-info { flex: 1; }
.bet-game-name { font-weight: 700; font-size: 15px; }
.bet-issue { font-size: 12px; color: var(--text-gray); }
.bet-status { font-size: 13px; font-weight: 600; }
.status-win { color: var(--primary-red); }
.status-lose { color: var(--text-gray); }
.status-pending { color: var(--primary-blue); }
.status-cancel { color: var(--text-light); }

.bet-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
}
.bet-detail-label { color: var(--text-gray); }
.bet-detail-value { font-weight: 600; }
.bet-detail-value.profit-positive { color: var(--primary-red); }
.bet-card-footer {
    border-top: 1px solid #f0f0f0;
    margin-top: 10px;
    padding-top: 8px;
    font-size: 12px;
    color: var(--text-gray);
}

.list-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 12px 16px;
}

.list-page-btn {
    min-width: 72px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid #e8ebf0;
    border-radius: 8px;
    background: #fff;
    color: #4a5568;
    font-size: 13px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.list-page-btn.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.list-page-info {
    font-size: 13px;
    color: var(--text-gray);
    white-space: nowrap;
}

.summary-bar {
    position: fixed;
    bottom: var(--nav-height);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    background: var(--white);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 10px 8px;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
    z-index: 150;
}
.summary-item { text-align: center; }
.summary-value { font-size: 13px; font-weight: 700; }
.summary-label { font-size: 10px; color: var(--text-gray); margin-top: 2px; }
.summary-value.profit-positive { color: var(--primary-red); }

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-gray);
}
.empty-state-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    margin: 0 auto 16px;
}
.empty-state-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ===== Mine Page ===== */
body.page-mine {
    background: #f5f5f5;
}

.mine-page {
    position: relative;
    padding-bottom: 24px;
    min-height: 100vh;
}

.mine-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    background:
        radial-gradient(ellipse 80% 60% at 20% 15%, rgba(255, 255, 255, 0.85) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 85% 25%, rgba(255, 160, 160, 0.22) 0%, transparent 55%),
        linear-gradient(180deg, #ffe8e8 0%, #fff5f5 55%, #f5f5f5 100%);
    z-index: 0;
    pointer-events: none;
}

.mine-top-bar {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    padding: 14px 16px 0;
}

.mine-settings-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff5858;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 88, 88, 0.12);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(255, 88, 88, 0.08);
}
.mine-settings-btn svg {
    width: 20px;
    height: 20px;
}

.mine-profile-row {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px 18px;
}

.mine-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(145deg, #ff8a8a 0%, #ff5858 55%, #e53935 100%);
    box-shadow: 0 4px 14px rgba(255, 88, 88, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    padding: 0;
}

.mine-avatar .mine-avatar-inner,
.mine-avatar .user-avatar {
    width: 100%;
    height: 100%;
    font-size: 34px;
    box-shadow: none;
}

.mine-avatar .user-avatar--fallback,
.mine-avatar .user-avatar--image {
    background: transparent;
}

a.mine-profile-link {
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

a.mine-profile-link:active {
    opacity: 0.88;
}

.mine-user-block {
    flex: 1;
    min-width: 0;
}

.mine-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.mine-username {
    font-size: 18px;
    font-weight: 700;
    color: #1a1d26;
    letter-spacing: 0.2px;
}

.mine-vip-tag {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #ffd54f 0%, #ff9800 100%);
    box-shadow: 0 1px 4px rgba(255, 152, 0, 0.35);
}

.mine-invite-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 12px;
    color: #8a93a8;
}

a.mine-auth-trigger {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
a.mine-auth-trigger:hover {
    opacity: 0.9;
}

.mine-copy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: none;
    color: #b0b7c3;
    cursor: pointer;
}
.mine-copy-btn svg {
    width: 14px;
    height: 14px;
}

.mine-vip-pill {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    border-radius: 24px;
    background: linear-gradient(135deg, #fff8e1 0%, #ffe082 40%, #ffca28 100%);
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.35);
    color: #e65100;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.5px;
}
.mine-vip-crown {
    display: flex;
    width: 18px;
    height: 18px;
    color: #ff8f00;
}
.mine-vip-crown svg {
    width: 100%;
    height: 100%;
}

.mine-wallet-block {
    position: relative;
    z-index: 2;
    margin: 0 14px 10px;
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--shadow);
    border: 1px solid #f0f0f0;
    overflow: hidden;
}

.mine-wallet-card {
    position: relative;
    border-radius: 0;
    padding: 14px 14px 16px;
    color: #333;
    background: #fff8f8;
    border: none;
    box-shadow: none;
    overflow: hidden;
}
.mine-wallet-card::after {
    display: none;
}

.mine-wallet-guest {
    padding-bottom: 16px;
    background: #fff;
}

.mine-wallet-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.mine-wallet-title {
    font-size: 15px;
    font-weight: 600;
    color: #222;
}

.mine-wallet-more {
    font-size: 12px;
    color: #666;
    text-decoration: none;
}

.mine-wallet-body {
    position: relative;
    z-index: 1;
    padding-bottom: 4px;
}

.mine-balance-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mine-balance-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.mine-flag-wrap {
    display: flex;
    align-items: center;
    gap: 2px;
    background: #fff5f5;
    border-radius: 20px;
    padding: 4px 8px;
}

.mine-flag {
    font-size: 16px;
    line-height: 1;
}

.mine-balance-num {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1;
    color: var(--primary-red);
}

.mine-refresh-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #fff5f5;
    color: #ff5858;
    cursor: pointer;
}
.mine-refresh-btn svg {
    width: 15px;
    height: 15px;
}

.mine-rebate-btn {
    flex-shrink: 0;
    padding: 8px 14px;
    border: 1px solid #ffd6d6;
    border-radius: 20px;
    background: #fff5f5;
    color: #ff5858;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
}

.mine-login-hint {
    display: block;
    padding: 8px 0;
    color: #ff5858;
    font-size: 14px;
    font-weight: 500;
}

.mine-action-panel {
    position: relative;
    z-index: 3;
    margin: 0;
    padding: 12px 8px 10px;
    background: #fff;
    border: none;
    border-top: 1px solid #fff0f0;
    border-radius: 0;
    box-shadow: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
}

.mine-action-panel--solo {
    margin: 0 14px 10px;
    z-index: 2;
    border-radius: 14px;
    border: 1px solid #f0f0f0;
    border-top: 1px solid #f0f0f0;
    box-shadow: var(--shadow);
}

.mine-action-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
    border-radius: 12px;
    text-decoration: none;
    color: #333;
    transition: background 0.2s, transform 0.15s;
}
.mine-action-item:active {
    background: #fff5f5;
    transform: scale(0.96);
}
.mine-action-icon-wrap {
    position: relative;
    display: inline-flex;
}
.mine-action-icon-wrap .mine-action-badge {
    top: -4px;
    right: -8px;
}

.mine-action-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mine-action-icon svg {
    width: 24px;
    height: 24px;
}
.mine-action-icon--blue {
    background: linear-gradient(145deg, #e3f2fd, #bbdefb);
    color: #1e88e5;
    box-shadow: 0 4px 12px rgba(30, 136, 229, 0.2);
}
.mine-action-icon--orange {
    background: linear-gradient(145deg, #fff3e0, #ffe0b2);
    color: #f57c00;
    box-shadow: 0 4px 12px rgba(245, 124, 0, 0.2);
}
.mine-action-icon--red {
    background: linear-gradient(145deg, #ffebee, #ffcdd2);
    color: #e53935;
    box-shadow: 0 4px 12px rgba(229, 57, 53, 0.2);
}
.mine-action-icon--purple {
    background: linear-gradient(145deg, #f3e5f5, #e1bee7);
    color: #8e24aa;
    box-shadow: 0 4px 12px rgba(142, 36, 170, 0.2);
}
.mine-action-icon--orange2 {
    background: linear-gradient(145deg, #fff5e6, #ffe0b2);
    color: #ff9800;
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.2);
}
.mine-action-icon--pink {
    background: linear-gradient(145deg, #fce8f0, #f8bbd9);
    color: #e91e63;
    box-shadow: 0 4px 12px rgba(233, 30, 99, 0.2);
}

.mine-action-label {
    font-size: 12px;
    color: #4a4f5c;
    font-weight: 500;
}

.mine-action-badge {
    position: absolute;
    background: #ff5252;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 8px;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(255, 82, 82, 0.4);
}

.mine-func-section {
    position: relative;
    z-index: 2;
    margin: 10px 14px 0;
}

.mine-func-card {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 16px 14px 14px;
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--shadow);
    border: 1px solid #f0f0f0;
}

.mine-func-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a1d26;
    margin-bottom: 14px;
    padding-left: 2px;
}

.mine-promo-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 6px;
}

.mine-promo-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
    padding: 12px 10px 12px 14px;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
}
button.mine-promo-item {
    width: 100%;
    border: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: left;
}

.mine-promo-share {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
}
.mine-promo-checkin {
    background: linear-gradient(135deg, #fff5f5 0%, #ffeded 100%);
}

.mine-promo-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 1;
}
.mine-promo-text strong {
    font-size: 14px;
    font-weight: 700;
    color: #1a1d26;
}
.mine-promo-text span {
    font-size: 11px;
    color: #9aa3b2;
}

.mine-promo-art {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.mine-promo-art--bag {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23ff5252' d='M32 8c-6 0-10 4-10 10v4h20v-4c0-6-4-10-10-10z'/%3E%3Cpath fill='%23e53935' d='M14 26c-2 0-4 2-4 4v22c0 2 2 4 4 4h36c2 0 4-2 4-4V30c0-2-2-4-4-4H14z'/%3E%3Ccircle fill='%23ffd54f' cx='32' cy='38' r='8'/%3E%3Ctext x='32' y='42' text-anchor='middle' fill='%23e65100' font-size='10' font-weight='bold'%3E¥%3C/text%3E%3C/svg%3E");
}
.mine-promo-art--calendar {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect fill='%23fff' stroke='%23ff5858' stroke-width='2' x='10' y='14' width='44' height='40' rx='4'/%3E%3Crect fill='%23ff5858' x='10' y='14' width='44' height='12' rx='4'/%3E%3Cpath fill='none' stroke='%23ff5858' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M28 36l4 4 8-10'/%3E%3C/svg%3E");
}

.mine-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.mine-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.mine-menu-item:active {
    background: #fff5f5;
    transform: scale(0.99);
    box-shadow: none;
}

.mine-menu-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    box-shadow: 0 2px 8px rgba(255, 88, 88, 0.22);
}

.mine-menu-icon svg {
    width: 18px;
    height: 18px;
}

.mine-menu-icon--brand {
    background: linear-gradient(145deg, #ff8a8a 0%, #ff5858 100%);
}
.mine-menu-icon--blue { background: #e8f4fd; color: #1e88e5; }
.mine-menu-icon--orange { background: #fff3e8; color: #f57c00; }
.mine-menu-icon--red { background: #ffebee; color: #e53935; }
.mine-menu-icon--purple { background: #f3e8fd; color: #8e24aa; }
.mine-menu-icon--orange2 { background: #fff5e6; color: #ff9800; }
.mine-menu-icon--pink { background: #fce8f0; color: #e91e63; }
.mine-menu-icon--green { background: #e8f5e9; color: #43a047; }
.mine-menu-icon--cyan { background: #e0f7fa; color: #00acc1; }

.mine-menu-body {
    flex: 1;
    min-width: 0;
}

.mine-menu-title {
    font-size: 14px;
    font-weight: 600;
    color: #222;
}

.mine-menu-desc {
    font-size: 11px;
    color: #999;
    margin-top: 3px;
    line-height: 1.35;
}

.mine-menu-badge {
    flex-shrink: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 10px;
    background: #ff5858;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-left: auto;
}

.mine-menu-arrow {
    display: none;
}

button.mine-menu-item {
    width: 100%;
    border: 1px solid #f0f0f0;
    background: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* Mine menu — Scheme 2 grid */
.mine-menu-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 34px;
}

.mine-menu--grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px 6px;
    margin-top: 10px;
    padding: 14px 12px;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 14px;
    box-shadow: var(--shadow);
}

.mine-menu-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 8px 4px;
    border: none;
    background: transparent;
    text-decoration: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.mine-menu-grid-item:active {
    transform: scale(0.95);
}

.mine-menu--grid .mine-menu-icon {
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.mine-menu--grid .mine-menu-icon--art svg {
    width: 32px;
    height: 32px;
    display: block;
    filter: drop-shadow(0 2px 5px rgba(15, 23, 42, 0.1));
}

.mine-menu-label {
    display: block;
    width: 100%;
    font-size: 11px;
    font-weight: 600;
    color: #333;
    text-align: center;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mine-menu--grid .mine-menu-badge {
    position: absolute;
    top: -4px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 9px;
    margin-left: 0;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(255, 88, 88, 0.35);
}

button.mine-menu-grid-item {
    width: auto;
    text-align: center;
}

/* ===== APP Download Modal (Mine) ===== */
.app-download-modal {
    position: fixed;
    inset: 0;
    z-index: 10003;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.app-download-modal[hidden] { display: none; }
.app-download-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}
.app-download-modal-panel {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 20px 20px 0 0;
    padding: 22px 18px 28px;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.12);
}
.app-download-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: none;
    background: #f3f4f6;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    color: #666;
    cursor: pointer;
}
.app-download-title {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    text-align: center;
}
.app-download-sub {
    margin: 0 0 20px;
    font-size: 13px;
    color: #8b95a5;
    text-align: center;
}
.app-download-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.app-download-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 18px;
    border: 1px solid #e8eaed;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.app-download-btn:active {
    background: #f8f9fb;
}
.app-download-btn--android {
    border-color: #c8e6c9;
    background: linear-gradient(180deg, #f1fbf2 0%, #fff 100%);
}
.app-download-btn--ios {
    border-color: #e0e0e0;
    background: linear-gradient(180deg, #f7f7f8 0%, #fff 100%);
}
.app-download-btn-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.app-download-btn-icon svg {
    width: 26px;
    height: 26px;
}
.app-download-btn--android .app-download-btn-icon {
    background: #e8f5e9;
    color: #43a047;
}
.app-download-btn--ios .app-download-btn-icon {
    background: #f5f5f5;
    color: #212121;
}
.app-download-btn-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: left;
}
.app-download-btn-text strong {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
}
.app-download-btn-text small {
    font-size: 12px;
    color: #8b95a5;
}

.mine-logout-wrap {
    padding: 10px 14px 16px;
}

.mine-logout-btn {
    display: block;
    width: 100%;
    padding: 14px 20px;
    border: 1px solid #f0f0f0;
    border-radius: 14px;
    background: #fff;
    color: #666;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    box-shadow: var(--shadow);
    transition: background 0.2s, box-shadow 0.2s;
}

.mine-logout-btn:active {
    background: #fff5f5;
    box-shadow: none;
}

/* ===== Rebate Modal (Mine) ===== */
.rebate-modal {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.rebate-modal[hidden] { display: none; }
.rebate-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}
.rebate-modal-panel {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: 88vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 20px 20px 0 0;
    padding: 18px 16px 24px;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.12);
}
.rebate-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: none;
    background: #f3f4f6;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    color: #666;
    cursor: pointer;
}
.rebate-claimable {
    text-align: center;
    margin: 0 0 14px;
    padding-top: 4px;
}
.rebate-claimable-label {
    font-size: 18px;
    font-weight: 700;
    color: #1a1d26;
    margin: 0 0 8px;
}
.rebate-claimable-value {
    font-size: 34px;
    font-weight: 800;
    color: #e53935;
    line-height: 1.1;
}
.rebate-claim-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    margin: 0 auto 12px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(145deg, #ff6b6b, #e53935);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(229, 57, 53, 0.35);
}
.rebate-claim-circle:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}
.rebate-claim-circle:active:not(:disabled) {
    transform: scale(0.96);
}
.rebate-modal-tip {
    margin: 0 0 14px;
    text-align: center;
    font-size: 11px;
    color: #a0a8b3;
    line-height: 1.5;
}
.rebate-table-wrap {
    border: 1px solid #f0f2f5;
    border-radius: 12px;
    overflow: hidden;
}
.rebate-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.rebate-table th,
.rebate-table td {
    padding: 10px 8px;
    text-align: center;
    border-bottom: 1px solid #f5f5f5;
}
.rebate-table th {
    background: #fafbfc;
    color: #8a93a3;
    font-weight: 600;
}
.rebate-table tr:last-child td {
    border-bottom: none;
}
.rebate-table-empty {
    color: #a0a8b3;
    padding: 18px 8px !important;
}
.rebate-status {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
}
.rebate-status--pending { color: #e53935; }
.rebate-status--claimed { color: #2e7d32; }
.rebate-status--expired { color: #a0a8b3; }
.rebate-status--none { color: #c5cad1; }

/* ===== Check-in Modal (Mine) ===== */
.checkin-modal {
    position: fixed;
    inset: 0;
    z-index: 10002;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.checkin-modal[hidden] { display: none; }
.checkin-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}
.checkin-modal-panel {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: 92vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 20px 20px 0 0;
    padding: 0 14px 22px;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.12);
}
.checkin-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 2;
    width: 30px;
    height: 30px;
    border: none;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    color: #888;
    cursor: pointer;
}
.checkin-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 -14px 14px;
    padding: 20px 16px 22px;
    background: linear-gradient(135deg, #fff0f3 0%, #ffe8ef 45%, #fff8f0 100%);
    border-radius: 20px 20px 0 0;
}
.checkin-hero-text {
    text-align: center;
}
.checkin-hero-title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 800;
    color: #1a1d26;
}
.checkin-hero-sub {
    margin: 0;
    font-size: 13px;
    color: #8a93a3;
}
.checkin-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}
.checkin-loading {
    grid-column: 1 / -1;
    text-align: center;
    color: #a0a8b3;
    padding: 24px 8px;
    font-size: 13px;
}
.checkin-day {
    min-height: 78px;
    padding: 8px 6px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #f0f2f5;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.checkin-day-label {
    font-size: 11px;
    color: #8a93a3;
}
.checkin-day-coin {
    font-size: 18px;
    line-height: 1;
}
.checkin-day-amount {
    font-size: 13px;
    font-weight: 700;
    color: #e53935;
}
.checkin-day-missed {
    font-size: 11px;
    color: #e53935;
    font-weight: 600;
}
.checkin-day--today {
    border-color: #ffb74d;
    background: linear-gradient(180deg, #fffaf2 0%, #fff3e0 100%);
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.15);
}
.checkin-day--checked .checkin-day-coin {
    color: #2e7d32;
}
.checkin-day--missed {
    background: #fafbfc;
}
.checkin-day--future {
    opacity: 0.92;
}
.checkin-day--full {
    background: linear-gradient(145deg, #ff8a50, #ff6b35);
    border: none;
    color: #fff;
}
.checkin-day--full .checkin-day-label,
.checkin-day--full .checkin-day-amount {
    color: #fff;
}
.checkin-day--full.checkin-day--claimable {
    box-shadow: 0 6px 16px rgba(255, 107, 53, 0.35);
    animation: checkin-pulse 1.6s ease-in-out infinite;
}
.checkin-day-gift {
    font-size: 22px;
    line-height: 1;
}
@keyframes checkin-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}
.checkin-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}
.checkin-action-hint {
    margin: 0;
    text-align: center;
    font-size: 13px;
    color: #e53935;
    font-weight: 600;
}
.checkin-btn {
    width: 100%;
    height: 44px;
    border: none;
    border-radius: 22px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.checkin-btn--daily {
    background: linear-gradient(145deg, #ff6b6b, #e53935);
    color: #fff;
    box-shadow: 0 6px 16px rgba(229, 57, 53, 0.28);
}
.checkin-btn--full {
    background: linear-gradient(145deg, #ff8a50, #ff6b35);
    color: #fff;
}
.checkin-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}
.checkin-conditions {
    background: #fafbfc;
    border-radius: 14px;
    padding: 12px;
}
.checkin-conditions-title {
    font-size: 14px;
    font-weight: 700;
    color: #1a1d26;
    margin-bottom: 12px;
    padding-left: 10px;
    border-left: 3px solid #e53935;
}
.checkin-condition + .checkin-condition {
    margin-top: 12px;
}
.checkin-condition-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 12px;
}
.checkin-condition-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #fff3e0 center/16px no-repeat;
}
.checkin-condition-icon--recharge {
    background-image: radial-gradient(circle, #ffb300 35%, transparent 36%);
}
.checkin-condition-icon--bet {
    background-image: radial-gradient(circle, #ff7043 35%, transparent 36%);
}
.checkin-condition-label {
    flex: 1;
    color: #4a5568;
}
.checkin-condition-value {
    color: #8a93a3;
    font-size: 11px;
}
.checkin-progress {
    height: 6px;
    background: #eceff3;
    border-radius: 999px;
    overflow: hidden;
}
.checkin-progress > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #ff8a65, #e53935);
    border-radius: 999px;
    transition: width 0.25s ease;
}

/* ===== Recharge Page ===== */
.page-content { padding: 12px; }
.page-content.no-nav { padding-bottom: 20px; }
.card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
}
.card-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
}
.card-title .required { color: var(--primary-red); }
.wd-section-title .required { color: var(--primary-red); }

.recharge-page .wd-method-tabs {
    margin-bottom: 14px;
}
.recharge-page .wd-method-tab {
    gap: 8px;
    padding: 12px 4px 10px;
}

.payment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.payment-item {
    border: 1px solid #e0e0e0;
    border-radius: var(--radius-sm);
    padding: 12px 8px;
    text-align: center;
    font-size: 13px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
}
.payment-item.active {
    background: var(--primary-blue);
    color: white;
    border-color: var(--primary-blue);
}
.payment-item .pay-icon { font-size: 20px; margin-bottom: 4px; }
.pay-icon--image {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.pay-icon--image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.recharge-empty-hint {
    grid-column: 1 / -1;
    text-align: center;
    color: #999;
    font-size: 13px;
    padding: 16px 8px;
}

/* ===== Recharge Pay Page ===== */
.rc-pay-page .rc-pay-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
}
.rc-pay-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
}
.rc-pay-row + .rc-pay-row { border-top: 1px solid #f0f0f0; }
.rc-pay-label { color: #666; }
.rc-pay-value { color: #333; font-weight: 500; }
.rc-pay-amount { color: var(--primary-red); font-size: 18px; font-weight: 700; }
.rc-pay-countdown { color: var(--primary-red); font-weight: 700; font-variant-numeric: tabular-nums; }
.rc-pay-mono { font-family: ui-monospace, monospace; font-size: 13px; word-break: break-all; }
.rc-pay-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px 0;
}
.rc-pay-qr-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    cursor: zoom-in;
    margin: 0 auto;
}
.rc-pay-qr img {
    width: min(220px, 70vw);
    max-height: 220px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #eee;
    display: block;
}
.rc-pay-qr p { margin-top: 10px; color: #666; font-size: 13px; width: 100%; }
.rc-pay-info-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f5;
    font-size: 14px;
}
.rc-pay-info-row span:first-child { color: #666; flex-shrink: 0; }
.rc-pay-info-row span:last-child { text-align: right; word-break: break-all; }
.rc-copy-btn {
    margin-left: 6px;
    padding: 2px 8px;
    font-size: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    color: #666;
    cursor: pointer;
}
.rc-proof-upload { margin-top: 4px; }
.rc-proof-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.rc-proof-item {
    position: relative;
    aspect-ratio: 1;
    border: 1px dashed #ddd;
    border-radius: 10px;
    overflow: hidden;
    background: #fafafa;
}
.rc-proof-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rc-proof-add {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.rc-proof-add .rc-proof-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.rc-proof-plus { font-size: 32px; line-height: 1; color: #ccc; pointer-events: none; }
.rc-proof-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    padding: 0;
}
.rc-proof-hint { margin: 8px 0 0; font-size: 12px; color: #999; }

.rc-image-viewer {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.rc-image-viewer[hidden] { display: none; }
.rc-image-viewer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.75);
}
.rc-image-viewer-body {
    position: relative;
    z-index: 1;
    max-width: 92vw;
    max-height: 85vh;
}
.rc-image-viewer-body img {
    max-width: 92vw;
    max-height: 85vh;
    object-fit: contain;
    display: block;
    border-radius: 8px;
}
.rc-image-viewer-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    font-size: 24px;
    line-height: 36px;
    color: #333;
    cursor: pointer;
    padding: 0;
}
.rc-pay-status {
    background: var(--white);
    border-radius: var(--radius);
    padding: 24px 16px;
    text-align: center;
    box-shadow: var(--shadow);
}
.rc-pay-status-title { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.rc-pay-status--wait .rc-pay-status-title { color: #ff9800; }
.rc-pay-status--success .rc-pay-status-title { color: #2e7d32; }
.rc-pay-status--fail .rc-pay-status-title { color: #e53935; }
.rc-pay-status p { color: #666; font-size: 14px; margin: 0; }
.rc-pay-hint { color: #666; font-size: 13px; margin: 0; }
.payment-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--primary-red);
    color: white;
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 8px;
}
.expand-btn {
    text-align: center;
    color: var(--text-gray);
    font-size: 13px;
    padding: 10px;
    cursor: pointer;
}

.amount-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.amount-item {
    border: 1px solid #e0e0e0;
    border-radius: var(--radius-sm);
    padding: 16px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.amount-item.active {
    border-color: #ff5722;
    color: #ff5722;
    background: #fff8f5;
}
.recharge-custom-amount {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #f0f0f0;
}
.recharge-custom-amount--solo {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.recharge-amount-clear {
    color: #ccc;
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
}
.actual-amount {
    text-align: center;
    color: var(--gold);
    font-size: 14px;
    margin-top: 12px;
}

.btn-primary {
    display: block;
    width: 100%;
    padding: 14px;
    background: var(--primary-blue);
    color: white;
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    margin-top: 8px;
}
.btn-primary:disabled, .btn-primary.disabled {
    background: #ccc;
    cursor: not-allowed;
}
.btn-danger {
    background: var(--primary-red);
}
.page-footer-info {
    text-align: center;
    font-size: 12px;
    color: var(--gold);
    margin-top: 8px;
}
.page-disclaimer {
    text-align: center;
    font-size: 11px;
    color: var(--text-gray);
    margin-top: 6px;
    padding: 0 16px;
}

/* ===== Withdraw Page ===== */
.withdraw-banner {
    background: linear-gradient(135deg, #42A5F5, #1565C0);
    border-radius: var(--radius);
    padding: 16px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    position: relative;
}
.withdraw-banner-tag {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--primary-red);
    color: white;
    padding: 2px 8px;
    font-size: 10px;
    border-radius: var(--radius) 0 8px 0;
}
.withdraw-banner-text h4 { font-size: 14px; font-weight: 700; }
.withdraw-banner-text p { font-size: 11px; opacity: 0.9; margin-top: 4px; }
.withdraw-banner-btn {
    background: white;
    color: var(--primary-blue);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.account-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
}
.account-card::before {
    content: '';
    position: absolute;
    right: -20px;
    bottom: -20px;
    width: 100px;
    height: 100px;
    background: rgba(0,0,0,0.02);
    border-radius: 50%;
}
.account-type {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.alipay-icon {
    width: 28px;
    height: 28px;
    background: var(--primary-blue);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}
.account-number {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 8px;
}
.account-change {
    text-align: right;
    color: var(--primary-red);
    font-size: 12px;
    cursor: pointer;
}

.withdraw-input-section { margin-bottom: 12px; }
.withdraw-label { font-size: 13px; color: var(--text-gray); margin-bottom: 8px; }
.withdraw-input-wrap {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
    padding: 8px 0;
}
.withdraw-currency { font-size: 24px; font-weight: 700; margin-right: 8px; }
.withdraw-input {
    flex: 1;
    font-size: 20px;
    background: transparent;
}
.withdraw-input::placeholder { color: var(--text-light); }
.withdraw-input-footer {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 12px;
    color: var(--text-gray);
}
.withdraw-max { color: var(--primary-blue); cursor: pointer; }

/* ===== Withdraw Methods ===== */
.wd-page { padding-bottom: 24px; }
.wd-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.wd-section-title { font-size: 15px; font-weight: 600; margin: 0 0 12px; color: #222; }
.wd-section-head .wd-section-title { margin: 0; }
.wd-records-btn {
    flex-shrink: 0;
    padding: 7px 12px;
    border-radius: 16px;
    background: #fff5f5;
    color: var(--primary-red);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid rgba(230, 57, 53, 0.12);
}
.wd-records-btn:active {
    opacity: 0.88;
}
.wd-method-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}
.wd-method-tab {
    border: 1px solid #eee;
    background: #fff;
    border-radius: 10px;
    padding: 10px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #666;
    cursor: pointer;
}
.wd-method-tab.active {
    border-color: #ff5722;
    color: #ff5722;
    background: #fff8f5;
}
.wd-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}
.wd-icon--alipay { background: #1677ff; }
.wd-icon--wechat { background: #07c160; }
.wd-icon--bank { background: #ff9800; }
.wd-icon--usdt { background: #26a17b; }
.wd-icon--bobi { background: #7c4dff; }
.wd-icon--image {
    background: transparent;
    border-radius: 8px;
}
.wd-icon--image img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
}
.wd-panel { display: none; background: transparent; border-radius: 12px; padding: 16px 0 12px; margin-bottom: 0; }
.wd-panel.active { display: block; }
.wd-bind-collapse {
    margin-bottom: 16px;
    background: var(--bg-gray);
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
}
.wd-bind-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border: none;
    border-radius: 0;
    background: var(--bg-gray);
    font-size: 15px;
    font-weight: 600;
    color: #222;
    cursor: pointer;
    text-align: left;
}
.wd-bind-toggle-text {
    flex: 1;
}
.wd-bind-toggle-status {
    font-size: 13px;
    font-weight: 500;
    color: #52c41a;
    flex-shrink: 0;
}
.wd-bind-toggle-icon {
    width: 8px;
    height: 8px;
    border-right: 2px solid #999;
    border-bottom: 2px solid #999;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-top: -4px;
}
.wd-bind-collapse.is-open .wd-bind-toggle {
    border-bottom: 1px solid #e8e8e8;
    background: var(--bg-gray);
}
.wd-bind-collapse.is-open .wd-bind-toggle-icon {
    transform: rotate(-135deg);
    margin-top: 2px;
}
.wd-bind-body {
    padding: 0 16px 16px;
    background: var(--bg-gray);
}
.wd-bind-collapse.is-open .wd-bind-body {
    padding-top: 4px;
}
.wd-saved { margin-bottom: 12px; }
.wd-saved-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 14px;
}
.wd-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 52px;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--primary-red);
    background: linear-gradient(180deg, #fff, #fff7f7);
    border: 1px solid #ffb4b0;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(230, 57, 53, 0.08);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.wd-delete-btn:active {
    background: #ffeceb;
    border-color: #ff8a84;
    transform: scale(0.97);
}
.wd-delete-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.wd-edit-btn {
    border: none;
    background: none;
    color: #ff5722;
    font-size: 13px;
    cursor: pointer;
}
.wd-saved-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #f5f5f5;
    font-size: 14px;
}
.wd-saved-row span:first-child { color: #999; flex-shrink: 0; }
.wd-saved-row span:last-child { text-align: right; word-break: break-all; }
.wd-saved-qr {
    margin-top: 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.wd-saved-qr img {
    max-width: 180px;
    max-height: 180px;
    border-radius: 8px;
    border: 1px solid #eee;
    display: block;
    margin: 0 auto;
}
.wd-saved-qr span {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #999;
}
.wd-label { display: block; font-size: 13px; color: #666; margin-bottom: 6px; }
.wd-upload {
    position: relative;
    width: min(100%, 240px);
    margin: 0 auto;
}
.wd-file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}
.wd-upload-preview {
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 168px;
    border: 2px dashed #ccc;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    box-sizing: border-box;
    color: #666;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    overflow: hidden;
    background: #ececec;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.wd-upload-preview::before {
    content: '+';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    color: #999;
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.wd-upload:hover .wd-upload-preview,
.wd-upload:focus-within .wd-upload-preview {
    border-color: #aaa;
    background: #e3e3e3;
}
.wd-upload-preview:has(img) {
    border-style: solid;
    border-color: #ddd;
    background: #fff;
    padding: 8px;
}
.wd-upload-preview:has(img)::before {
    display: none;
}
.wd-upload-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.wd-save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 88px;
    padding: 10px 20px;
    margin: 12px auto 8px;
}
.wd-account-form {
    text-align: center;
}
.wd-account-form .form-group,
.wd-account-form .wd-upload {
    text-align: left;
}
.wd-page .btn-primary.wd-save-btn:not(:disabled) {
    width: auto;
    min-width: 120px;
    padding: 10px 24px;
    background: #fff;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    box-shadow: none;
}
.wd-page .btn-primary.wd-save-btn:not(:disabled):active {
    background: #f0f0f0;
    border-color: #ccc;
}
.wd-page .wd-withdraw-form .btn-primary {
    background: var(--primary-red);
}
.wd-page .wd-withdraw-form .btn-primary:active {
    background: #c62828;
}
.wd-bind-hint { font-size: 12px; color: #ff9800; margin: 8px 0 0; text-align: center; }
.wd-form-error { color: #e53935; font-size: 13px; margin-top: 8px; }
.wd-divider { height: 8px; background: #f5f5f5; margin: 16px -16px; }
.wd-hint { color: #999; font-size: 13px; padding: 12px 0; }
.wd-hint a { color: var(--primary-blue, #1677ff); text-decoration: none; font-weight: 500; }
.wd-turnover-hint { color: #e74c3c; font-size: 13px; margin-top: 8px; }
.wd-method-extra {
    margin-bottom: 16px;
}
.wd-bind-entry-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #f0f0f0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.wd-bind-entry-card:active {
    transform: scale(0.99);
    border-color: #ffe3e1;
    box-shadow: 0 2px 8px rgba(230, 57, 53, 0.06);
}
.wd-bind-entry-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wd-bind-entry-icon svg {
    width: 48px;
    height: 48px;
    display: block;
    filter: drop-shadow(0 3px 8px rgba(229, 57, 53, 0.18));
}
.wd-bind-entry-title {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    color: #222;
}
.wd-bind-entry-arrow {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: #d0d0d0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wd-bind-entry-arrow svg {
    width: 18px;
    height: 18px;
    display: block;
}
.wd-account-brief-card {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.wd-account-brief-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f5f5f5;
}
.wd-account-brief-title {
    font-size: 14px;
    font-weight: 600;
    color: #222;
}
.wd-account-brief-edit {
    font-size: 13px;
    color: var(--primary-red);
    text-decoration: none;
    font-weight: 500;
}
.wd-account-brief-edit:active {
    opacity: 0.75;
}
.wd-account-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    font-size: 13px;
    line-height: 1.5;
}
.wd-account-row + .wd-account-row {
    border-top: 1px solid #f8f8f8;
}
.wd-account-label {
    flex-shrink: 0;
    color: #999;
}
.wd-account-value {
    text-align: right;
    color: #222;
    font-weight: 500;
    word-break: break-all;
}
.wd-account-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
}
.wd-account-qr {
    margin-top: 10px;
    padding: 12px;
    border-radius: 12px;
    background: #fafafa;
    text-align: center;
}
.wd-account-qr img {
    display: block;
    max-width: 120px;
    max-height: 120px;
    margin: 0 auto 8px;
    border-radius: 8px;
    border: 1px solid #eee;
    background: #fff;
}
.wd-account-qr span {
    font-size: 12px;
    color: #999;
}

/* ===== Withdraw Accounts Page ===== */
.wa-page {
    padding-bottom: 28px;
    background: var(--bg-page);
}
.wa-method-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}
.wa-method-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 4px 10px;
    border: 1px solid #eee;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.wa-method-item.is-active {
    border-color: #ffb4b0;
    background: #fff;
    box-shadow: 0 4px 14px rgba(230, 57, 53, 0.1);
    transform: translateY(-1px);
}
.wa-method-item.is-bound:not(.is-active) {
    border-color: #d9f7be;
}
.wa-method-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wa-method-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.wa-method-fallback {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    color: #666;
    font-size: 14px;
    font-weight: 700;
}
.wa-method-label {
    font-size: 11px;
    color: #333;
    line-height: 1.2;
    text-align: center;
}
.wa-method-badge {
    position: absolute;
    top: -4px;
    right: -2px;
    padding: 1px 5px;
    border-radius: 999px;
    background: #52c41a;
    color: #fff;
    font-size: 9px;
    line-height: 1.4;
    font-weight: 600;
}
.wa-panel {
    display: none;
}
.wa-panel.is-active {
    display: block;
}
.wa-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 18px 16px 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.wa-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f5f5f5;
}
.wa-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
}
.wa-card-subtitle {
    margin-top: 4px;
    font-size: 12px;
    color: #999;
    line-height: 1.4;
}
.wa-status-tag {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f5f5f5;
    color: #999;
    font-size: 12px;
    font-weight: 500;
}
.wa-status-tag--ok {
    background: #f6ffed;
    color: #389e0d;
}
.wa-info-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #f7f7f7;
    font-size: 14px;
}
.wa-info-row:last-of-type {
    border-bottom: none;
}
.wa-info-label {
    color: #999;
    flex-shrink: 0;
}
.wa-info-value {
    text-align: right;
    word-break: break-all;
    color: #222;
    font-weight: 500;
}
.wa-qr-block {
    margin-top: 8px;
    padding: 16px;
    border-radius: 12px;
    background: #f7f7f7;
    text-align: center;
}
.wa-qr-block img {
    max-width: 180px;
    max-height: 180px;
    border-radius: 8px;
    display: block;
    margin: 0 auto 8px;
    border: 1px solid #eee;
    background: #fff;
}
.wa-qr-block span {
    font-size: 12px;
    color: #999;
}
.wa-form .form-group {
    margin-bottom: 16px;
}
.wa-field-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #666;
}
.wa-input {
    border-radius: 10px;
    background: #fff;
    border-color: #eee;
}
.wa-page .wa-input {
    background: #fafafa;
}
.wa-page .wa-input:focus {
    background: #fff;
    border-color: #f0b4b2;
}
.wa-input:focus {
    background: #fff;
}
.wa-page .wd-upload {
    width: min(100%, 220px);
}
.wa-page .wd-upload-preview {
    background: #fff;
    border: 1.5px dashed #e8e8e8;
    border-radius: 14px;
    color: #888;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.wa-page .wd-upload-preview::before {
    content: '+';
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(145deg, #fff8f7 0%, #fff 100%);
    color: var(--primary-red);
    border: 1px solid #ffe3e1;
    font-size: 28px;
    font-weight: 300;
    box-shadow: 0 4px 12px rgba(230, 57, 53, 0.08);
}
.wa-page .wd-upload-preview span {
    font-size: 13px;
    color: #999;
}
.wa-page .wd-upload:hover .wd-upload-preview,
.wa-page .wd-upload:focus-within .wd-upload-preview {
    border-color: #f5b4b2;
    background: #fffcfc;
    box-shadow: 0 0 0 3px rgba(230, 57, 53, 0.06);
}
.wa-page .wd-upload-preview:has(img) {
    border-style: solid;
    border-color: #ffe3e1;
    background: #fff;
    padding: 10px;
    box-shadow: 0 2px 12px rgba(230, 57, 53, 0.06);
}
.wa-page .wd-upload-preview:has(img)::before {
    display: none;
}
.wa-page .wd-upload-preview:has(img) span {
    display: none;
}
.wa-page .wd-upload-preview:has(img) img {
    border-radius: 8px;
}
.wa-page .wa-qr-block {
    background: #fff;
    border: 1px solid #ffe3e1;
    box-shadow: 0 2px 12px rgba(230, 57, 53, 0.05);
}
.wa-page .wa-qr-block img {
    border-color: #f5f5f5;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
}
.wa-page .wa-btn--ghost {
    min-width: 112px;
    padding: 10px 28px;
    background: #fff;
    color: var(--primary-red);
    border: 1px solid #ffc9c8;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    box-shadow: none;
}
.wa-page .wa-btn--ghost:active {
    background: #fff5f5;
    border-color: #f5b4b2;
    transform: scale(0.98);
}
.wa-page .wa-btn--primary {
    min-width: 112px;
    padding: 11px 28px;
    background: linear-gradient(180deg, #f04a46 0%, var(--primary-red) 100%);
    color: #fff;
    border: none;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(230, 57, 53, 0.28);
    letter-spacing: 0.02em;
}
.wa-page .wa-btn--primary:active {
    background: linear-gradient(180deg, #d93632 0%, #c62828 100%);
    box-shadow: 0 2px 8px rgba(230, 57, 53, 0.22);
    transform: scale(0.98);
}
.wa-card-actions {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #f5f5f5;
    display: flex;
    justify-content: center;
}
.wa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    padding: 11px 24px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.wa-form {
    text-align: center;
}
.wa-form .form-group,
.wa-form .wd-upload {
    text-align: left;
}
.wa-btn--primary {
    width: auto;
    min-width: 100px;
    padding: 10px 20px;
    background: linear-gradient(180deg, #fff 0%, #f7f7f7 100%);
    color: #333;
    border: 1px solid #ddd;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.wa-btn--primary:active {
    background: #f0f0f0;
}
.wa-btn--ghost {
    background: #fff;
    color: #666;
    border: 1px solid #ddd;
    font-size: 14px;
    font-weight: 500;
    min-width: 108px;
    padding: 9px 18px;
}
.wa-btn--ghost:active {
    background: #fafafa;
}
.wa-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.wa-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
}

.mine-action-panel--cols4 {
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
}

.wd-pick-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.wd-pick-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    cursor: pointer;
}
.wd-pick-item:has(input:checked) {
    border-color: #ff5722;
    background: #fff8f5;
}
.wd-pick-item input { flex-shrink: 0; }
.wd-pick-text { display: flex; flex-direction: column; gap: 2px; }
.wd-pick-text strong { font-size: 14px; }
.wd-pick-text small { font-size: 12px; color: #999; }
.wd-mono { font-family: ui-monospace, monospace; font-size: 13px; }
.hidden { display: none !important; }

.info-list { background: var(--white); border-radius: var(--radius); padding: 4px 16px; margin-bottom: 16px; }
.info-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
    font-size: 13px;
}
.info-row:last-child { border-bottom: none; }
.info-label { color: var(--text-gray); }

.help-link {
    text-align: center;
    font-size: 13px;
    color: var(--text-gray);
    margin-top: 12px;
}
.help-link a { color: var(--primary-blue); }

/* ===== Share Page ===== */
.share-page {
    background: linear-gradient(180deg, #E3F2FD 0%, var(--bg-page) 30%);
    min-height: 100vh;
    padding-bottom: 20px;
}
.share-hero {
    text-align: center;
    padding: 20px 16px 0;
    font-size: 48px;
}
.share-card {
    margin: 0 16px;
    background: var(--white);
    border-radius: var(--radius);
    padding: 24px 20px;
    box-shadow: var(--shadow);
}
.share-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--primary-red);
    margin-bottom: 16px;
}
.share-code-label { font-size: 12px; color: var(--text-gray); }
.share-code {
    font-size: 32px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 12px;
}
.share-reward-banner {
    background: #FFF0F0;
    color: var(--primary-red);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    text-align: center;
    margin-bottom: 16px;
}
.share-divider {
    border: none;
    border-top: 1px dashed #e0e0e0;
    margin: 16px 0;
}
.share-qr {
    width: 180px;
    height: 180px;
    margin: 0 auto 12px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e0e0e0;
}
.share-link {
    color: var(--primary-blue);
    font-size: 12px;
    word-break: break-all;
    text-align: center;
    margin-bottom: 16px;
}
.share-btn-outline {
    display: block;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--primary-red);
    color: var(--primary-red);
    border-radius: var(--radius-sm);
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
    background: white;
}
.share-btn-primary {
    display: block;
    width: 100%;
    padding: 14px;
    background: var(--primary-red);
    color: white;
    border-radius: var(--radius-sm);
    text-align: center;
    font-size: 16px;
    font-weight: 600;
}
.share-btn-sub { font-size: 11px; opacity: 0.8; margin-top: 4px; }
.share-rules {
    font-size: 12px;
    color: var(--text-gray);
    line-height: 1.8;
    margin-top: 16px;
}
.share-rules .highlight { color: var(--primary-red); }
.share-footer-banner {
    margin: 16px;
    background: #FFF0F0;
    color: var(--primary-red);
    padding: 12px;
    border-radius: var(--radius-sm);
    text-align: center;
    font-size: 13px;
}

/* ===== Profile Page ===== */
.profile-avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 16px 24px;
    background: var(--white);
    margin-bottom: 12px;
}
.profile-avatar-section--clickable {
    cursor: pointer;
}
.profile-avatar-section .user-avatar.avatar-lg {
    margin: 0 auto;
}
.profile-modal-panel--avatar {
    max-width: 360px;
}
.profile-avatar-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    max-height: 50vh;
    overflow-y: auto;
    padding: 4px 2px 8px;
}
.profile-avatar-option {
    width: 100%;
    aspect-ratio: 1;
    border: 2px solid transparent;
    border-radius: 14px;
    padding: 0;
    background: #f5f6f8;
    cursor: pointer;
    overflow: hidden;
}
.profile-avatar-option.is-selected {
    border-color: #e53935;
    box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.15);
}
.profile-avatar-option img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.change-avatar {
    color: var(--text-gray);
    font-size: 13px;
    margin-top: 10px;
    cursor: pointer;
    text-align: center;
}
.profile-card {
    background: var(--white);
    border-radius: var(--radius);
    margin: 0 12px 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
}
.profile-card-title {
    font-size: 15px;
    font-weight: 700;
    padding: 14px 16px 8px;
}
.profile-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid #f5f5f5;
    font-size: 14px;
}
.profile-row:last-child { border-bottom: none; }
.profile-label { color: var(--text-dark); }
.profile-row__right {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    text-align: right;
    flex-shrink: 0;
    max-width: 72%;
}
.profile-copy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: none;
    color: #b0b7c3;
    cursor: pointer;
    flex-shrink: 0;
}
.profile-copy-btn svg {
    width: 14px;
    height: 14px;
}
.profile-value { color: var(--text-gray); }
.profile-action { color: var(--text-gray); }
.profile-action--nickname { color: var(--primary-red); }
.profile-action--set { color: var(--primary-red); }
.profile-action--muted { color: var(--text-gray); font-size: 12px; }
.profile-row--clickable { cursor: pointer; }
.profile-row-btn {
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.profile-modal {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.profile-modal[hidden] { display: none; }
.profile-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}
.profile-modal-panel {
    position: relative;
    width: 100%;
    max-width: 340px;
    background: #fff;
    border-radius: 16px;
    padding: 22px 20px 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}
.profile-modal-title {
    font-size: 17px;
    font-weight: 700;
    color: #1a1d26;
    text-align: center;
    margin-bottom: 8px;
}
.profile-modal-hint {
    font-size: 12px;
    color: #9aa3b2;
    text-align: center;
    margin-bottom: 16px;
}
.profile-field-error {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--primary-red, #e74c3c);
    text-align: left;
}
.profile-field-error[hidden] {
    display: none;
}
.profile-modal-form .form-group { margin-bottom: 12px; }
.profile-modal-form .form-input { width: 100%; }
.profile-modal-btn {
    width: 100%;
    margin-top: 8px;
    padding: 13px;
    border: none;
    border-radius: 10px;
    background: var(--primary-red);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.profile-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10002;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 14px;
    color: #fff;
    max-width: 80%;
    text-align: center;
}
.profile-toast--success { background: rgba(0, 0, 0, 0.78); }
.profile-toast--error { background: rgba(230, 57, 53, 0.92); }

.profile-logout-wrap {
    padding: 8px 16px 24px;
}

.profile-logout-btn {
    display: block;
    width: 100%;
    padding: 14px 20px;
    border: 1px solid #ffccd5;
    border-radius: 26px;
    background: #fff;
    color: var(--primary-red);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(230, 57, 53, 0.08);
    transition: background 0.2s, box-shadow 0.2s;
}

.profile-logout-btn:active {
    background: #fff5f5;
    box-shadow: 0 2px 8px rgba(230, 57, 53, 0.06);
}

/* ===== Agent Page ===== */
.agent-hero {
    margin: 12px;
    background: linear-gradient(135deg, #1E88E5, #42A5F5);
    border-radius: var(--radius);
    padding: 20px 16px;
    color: white;
}
.agent-claim-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.agent-claim-label { font-size: 13px; opacity: 0.9; }
.agent-claim-value { font-size: 32px; font-weight: 800; }
.agent-claim-hint {
    margin-top: 6px;
    font-size: 11px;
    opacity: 0.82;
    line-height: 1.4;
}
.agent-claim-btn {
    background: rgba(255,255,255,0.25);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    border: none;
    cursor: pointer;
}
.agent-claim-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.agent-period-tabs {
    margin-top: 0;
    border-bottom: none;
    background: #fff;
    margin-bottom: 0;
}
.agent-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 16px;
}
.agent-stat-value { font-size: 20px; font-weight: 700; }
.agent-stat-label { font-size: 11px; opacity: 0.8; margin-top: 4px; }

.agent-tabs {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    padding: 0 12px;
    background: var(--white);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.agent-tabs::-webkit-scrollbar { display: none; }
.agent-tab {
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text-gray);
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
}
.agent-tab.active {
    color: var(--primary-red);
    font-weight: 600;
}
.agent-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: var(--primary-red);
}

.agent-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 16px;
    margin: 12px;
    box-shadow: var(--shadow);
}
.agent-card-title {
    font-size: 12px;
    color: var(--text-gray);
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
}
.agent-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
}
.agent-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    text-align: center;
}
.agent-grid-value { font-size: 18px; font-weight: 700; }
.agent-grid-label { font-size: 11px; color: var(--text-gray); margin-top: 4px; }
.agent-card-footer {
    font-size: 11px;
    color: var(--text-gray);
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid #f5f5f5;
}

.agent-menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 8px 0;
}
.agent-menu-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}
.agent-menu-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}
.agent-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--text-dark);
}
.agent-menu-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.agent-menu-icon--team { background: #E3F2FD; }
.agent-menu-icon--record { background: #FFEBEE; }
.agent-menu-icon--share { background: #FFFDE7; }
.agent-menu-label { font-size: 12px; }

.agent-info-card .agent-info-title {
    font-size: 15px;
    color: #333;
    font-weight: 700;
    margin-bottom: 14px;
}
.agent-invite-card {
    padding: 14px 16px;
}
.agent-invite-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.agent-invite-label {
    font-size: 14px;
    color: #666;
    flex-shrink: 0;
}
.agent-invite-code {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    color: #111;
    letter-spacing: 0.04em;
}
.agent-invite-copy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #e8eaed;
    border-radius: 8px;
    background: #f8f9fb;
    color: #5f6b7a;
    cursor: pointer;
    flex-shrink: 0;
}
.agent-invite-copy svg {
    width: 16px;
    height: 16px;
}
.agent-invite-copy:active {
    background: #eef0f3;
}
.agent-info-section {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px dashed #eceff3;
}
.agent-info-section:last-of-type {
    margin-bottom: 10px;
    padding-bottom: 0;
    border-bottom: none;
}
.agent-info-formula {
    font-size: 14px;
    font-weight: 700;
    color: #111;
    line-height: 1.6;
}
.agent-info-desc {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 400;
    color: #111;
    line-height: 1.7;
}

.agent-sub-page {
    padding-top: 12px;
}
.agent-table-wrap {
    overflow-x: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.agent-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 12px;
}
.agent-table th,
.agent-table td {
    padding: 12px 10px;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap;
}
.agent-table th {
    background: #fafafa;
    color: #888;
    font-weight: 600;
}
.agent-table tbody tr:last-child td {
    border-bottom: none;
}
.agent-table td:first-child {
    color: #333;
    font-weight: 600;
}

/* ===== Auth Pages ===== */
.auth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--primary-red) 0%, #FF6B6B 30%, var(--bg-page) 30%);
    padding-bottom: 20px;
}
.auth-header {
    text-align: center;
    padding: 40px 20px 30px;
    color: white;
}
.auth-logo { font-size: 48px; margin-bottom: 8px; }
.auth-title { font-size: 24px; font-weight: 800; }
.auth-subtitle { font-size: 14px; opacity: 0.9; margin-top: 4px; }

.auth-form {
    margin: 0 20px;
    background: var(--white);
    border-radius: var(--radius);
    padding: 24px 20px;
    box-shadow: var(--shadow);
}
.auth-form-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
}
.form-group { margin-bottom: 16px; }
.form-label {
    font-size: 13px;
    color: var(--text-gray);
    margin-bottom: 6px;
    display: block;
}
.form-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e0e0e0;
    border-radius: var(--radius-sm);
    font-size: 15px;
    transition: border-color 0.2s;
}
.form-input:focus { border-color: var(--primary-blue); }
.form-error {
    background: #FFF0F0;
    color: var(--primary-red);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    margin-bottom: 16px;
}
.form-success {
    background: #E8F5E9;
    color: var(--green);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    margin-bottom: 16px;
}
.auth-submit {
    width: 100%;
    padding: 14px;
    background: var(--primary-red);
    color: white;
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-weight: 600;
    margin-top: 8px;
}
.auth-link {
    text-align: center;
    margin-top: 16px;
    font-size: 14px;
    color: var(--text-gray);
}
.auth-link a { color: var(--primary-blue); font-weight: 600; }

/* ===== Auth Modal ===== */
.auth-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
}
.auth-modal.auth-modal--open {
    opacity: 1;
    visibility: visible;
}
.auth-modal[hidden]:not(.auth-modal--open) {
    display: none;
}
.auth-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}
.auth-modal-panel {
    position: relative;
    width: 100%;
    max-width: 380px;
    background: #fff;
    border-radius: 20px;
    padding: 28px 24px 24px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
    transform: translateY(16px) scale(0.97);
    transition: transform 0.25s;
    max-height: 90vh;
    overflow-y: auto;
}
.auth-modal--open .auth-modal-panel {
    transform: translateY(0) scale(1);
}
.auth-modal-brand {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 16px;
}
.auth-modal-logo {
    display: block;
    max-width: 168px;
    max-height: 56px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.auth-modal-logo-fallback {
    font-size: 22px;
    font-weight: 800;
    color: var(--primary-red);
    text-align: center;
    line-height: 1.2;
}
.auth-modal-tabs {
    display: flex;
    background: #f0f4fa;
    border-radius: 10px;
    padding: 4px;
    margin: 0 0 20px;
}
.auth-modal-tab {
    flex: 1;
    padding: 10px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.auth-modal-tab.active {
    background: #fff;
    color: var(--primary-red);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.auth-modal-error {
    background: #fff0f0;
    color: var(--primary-red);
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 14px;
}
.auth-modal-form.hidden {
    display: none;
}
.auth-modal-form .form-group {
    margin-bottom: 14px;
}
.auth-modal-form .form-input {
    padding: 13px 14px;
    font-size: 15px;
    border-radius: 10px;
    background: #f8f9fb;
    border-color: #e8ecf2;
}
.auth-modal-form .auth-submit {
    border: none;
    cursor: pointer;
    border-radius: 10px;
    margin-top: 4px;
}

/* ===== Toast ===== */
.toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.92);
    background: rgba(0,0,0,0.75);
    color: white;
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    z-index: 10150;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    white-space: nowrap;
}
.toast.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.toast.toast--capsule {
    border-radius: 999px;
    padding: 14px 36px;
    font-size: 15px;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.82);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.02em;
}

/* ===== Confirm Modal ===== */
.confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.confirm-modal[hidden] {
    display: none !important;
}
.confirm-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}
.confirm-modal-panel {
    position: relative;
    width: 100%;
    max-width: 300px;
    background: #fff;
    border-radius: 16px;
    padding: 22px 20px 18px;
    text-align: center;
}
.confirm-modal-title {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #1a1a1a;
}
.confirm-modal-title--solo {
    margin-bottom: 20px;
    line-height: 1.5;
}
.confirm-modal-text {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 20px;
}
.confirm-modal-actions {
    display: flex;
    gap: 12px;
}
.confirm-modal-btn {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.confirm-modal-btn--cancel {
    background: #f3f4f6;
    color: #5f6b7a;
}
.confirm-modal-btn--confirm {
    background: linear-gradient(135deg, #e53935, #ef5350);
    color: #fff;
}
.confirm-modal-btn:active {
    opacity: 0.88;
}
.confirm-modal-actions--solo {
    display: block;
}
.confirm-modal-actions--solo .confirm-modal-btn {
    width: 100%;
}

/* ===== Customer Service Modal ===== */
.cs-modal {
    position: fixed;
    inset: 0;
    z-index: 10004;
    display: flex;
    flex-direction: column;
    background: #fff;
    height: 100dvh;
    max-height: 100dvh;
}
.cs-modal[hidden] {
    display: none !important;
}
.cs-modal-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    background: #fff;
}
.cs-modal-head {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 48px 8px;
    border-bottom: 1px solid #f0f0f0;
    background: #fff;
}
.cs-modal-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #1a1d26;
}
.cs-modal-close {
    position: absolute;
    right: 12px;
    top: calc(env(safe-area-inset-top, 0px) + 7px);
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: #f3f4f6;
    color: #666;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.cs-modal-close:active {
    opacity: 0.85;
}
.cs-modal-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #fff;
}
.cs-modal-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}

/* ===== First Deposit Bonus ===== */
.first-bonus-page {
    padding: 12px;
}
.first-bonus-banner {
    margin-bottom: 10px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow);
    background: #fff;
}
.first-bonus-banner img {
    width: 100%;
    display: block;
}
.first-bonus-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.first-bonus-head {
    padding: 14px 14px 10px;
    border-bottom: 1px solid #f0f1f4;
}
.first-bonus-head h2 {
    font-size: 17px;
    font-weight: 700;
    color: #222;
}
.first-bonus-head p {
    margin-top: 4px;
    font-size: 12px;
    color: #888;
}
.first-bonus-table-head,
.first-bonus-row {
    display: grid;
    grid-template-columns: 1.1fr 1fr 72px;
    gap: 8px;
    align-items: center;
    padding: 11px 14px;
}
.first-bonus-table-head {
    font-size: 12px;
    color: #8a94a6;
    background: #fafbff;
    border-bottom: 1px solid #f2f4f8;
}
.first-bonus-table-head span:last-child {
    text-align: center;
}
.first-bonus-row {
    border-bottom: 1px solid #f5f6f8;
}
.first-bonus-row:last-of-type {
    border-bottom: none;
}
.first-bonus-amount {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #2f3a4f;
}
.first-bonus-reward {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: #e53935;
}
.first-bonus-value-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}
.first-bonus-value-icon svg {
    width: 12px;
    height: 12px;
    display: block;
}
.first-bonus-value-icon--coin {
    background: linear-gradient(145deg, #ffd54f 0%, #ffb300 100%);
    box-shadow: 0 2px 6px rgba(255, 179, 0, 0.28);
}
.first-bonus-value-icon--gift {
    background: linear-gradient(145deg, #ff8a65 0%, #e53935 100%);
    box-shadow: 0 2px 6px rgba(229, 57, 53, 0.24);
}
.first-bonus-value-icon--gift svg {
    width: 11px;
    height: 11px;
}
.first-bonus-btn {
    width: 100%;
    border: none;
    border-radius: 14px;
    padding: 6px 0;
    font-size: 12px;
    font-weight: 600;
    color: #8d97a8;
    background: #edf0f5;
    cursor: default;
    text-align: center;
    box-sizing: border-box;
}
.first-bonus-btn.is-claimable {
    color: #fff;
    background: linear-gradient(135deg, #ef5350, #d32f2f);
    box-shadow: 0 4px 10px rgba(229, 57, 53, 0.26);
    cursor: pointer;
}
.first-bonus-btn.is-claimable:active {
    transform: scale(0.97);
}
.first-bonus-empty {
    padding: 26px 14px;
    text-align: center;
    color: #999;
    font-size: 13px;
}
.first-bonus-foot {
    padding: 12px 14px 14px;
    font-size: 12px;
    color: #6e7788;
    background: #fafbff;
}

/* ===== 余额宝 ===== */
body.page-yuebao {
    background: #f5f5f5;
}

.yuebao-page {
    min-height: 100vh;
    padding-bottom: 24px;
}

.yuebao-header {
    position: relative;
    padding: 12px 16px 56px;
    background: linear-gradient(160deg, #ff6b35 0%, #ff3d1f 55%, #f52a14 100%);
    color: #fff;
    text-align: center;
}

.yuebao-back {
    position: absolute;
    left: 12px;
    top: 10px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    text-decoration: none;
}

.yuebao-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    padding-top: 4px;
}

.yuebao-security {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 13px;
    opacity: 0.95;
}

.yuebao-security-icon svg {
    width: 16px;
    height: 16px;
}

.yuebao-security-arrow {
    font-size: 11px;
    letter-spacing: -2px;
}

.yuebao-card {
    margin: -36px 14px 0;
    padding: 22px 18px 20px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 2;
}

.yuebao-total-head {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #999;
    font-size: 13px;
}

.yuebao-eye-btn {
    border: none;
    background: none;
    padding: 0;
    color: #bbb;
    display: flex;
    align-items: center;
}

.yuebao-eye-btn svg {
    width: 18px;
    height: 18px;
}

.yuebao-total-value {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0 22px;
    font-size: 34px;
    font-weight: 700;
    color: #222;
    line-height: 1.1;
}

.yuebao-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 22px;
}

.yuebao-stat-label {
    font-size: 12px;
    color: #999;
    margin-bottom: 8px;
}

.yuebao-stat-value {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.yuebao-stat-value--earn {
    color: #ff4d2d;
}

.yuebao-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.yuebao-btn {
    border: none;
    border-radius: 24px;
    padding: 13px 16px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.yuebao-btn--out {
    background: #fff0eb;
    color: #ff4d2d;
}

.yuebao-btn--in {
    background: linear-gradient(135deg, #ff6b35, #ff3d1f);
    color: #fff;
}

.yuebao-btn--ghost {
    background: #f5f5f5;
    color: #666;
}

.yuebao-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.yuebao-modal[hidden] {
    display: none !important;
}

.yuebao-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.yuebao-modal-panel {
    position: relative;
    width: 100%;
    max-width: 340px;
    background: #fff;
    border-radius: 14px;
    padding: 22px 18px 18px;
}

.yuebao-modal-title {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 8px;
}

.yuebao-modal-hint {
    font-size: 13px;
    color: #999;
    text-align: center;
    margin: 0 0 16px;
}

.yuebao-modal-input {
    width: 100%;
    margin-bottom: 10px;
}

.yuebao-modal-error {
    color: #e53935;
    font-size: 13px;
    text-align: center;
    margin-bottom: 10px;
}

.yuebao-modal-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 8px;
}

.yuebao-records {
    margin: 14px 16px 24px;
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
}

.yuebao-records-title {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
    color: #1a1d26;
}

.yuebao-record-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.yuebao-record-item {
    padding: 12px 0;
    border-bottom: 1px solid #f2f4f7;
}

.yuebao-record-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.yuebao-record-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.yuebao-record-type {
    font-size: 14px;
    font-weight: 600;
    color: #1a1d26;
}

.yuebao-record-amount {
    font-size: 14px;
    font-weight: 700;
}

.yuebao-record-amount--plus {
    color: #e53935;
}

.yuebao-record-amount--minus {
    color: #2e7d32;
}

.yuebao-record-time {
    margin-top: 4px;
    font-size: 12px;
    color: #9aa3af;
}

.yuebao-record-empty {
    text-align: center;
    color: #9aa3af;
    font-size: 13px;
    padding: 24px 0;
}

.mine-action-panel--cols3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.mine-action-panel .home-quick-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
}

.mine-action-panel .home-quick-icon svg {
    width: 22px;
    height: 22px;
}

.mine-action-panel .home-quick-label {
    font-size: 11px;
    line-height: 1.15;
}

.mine-quick-img-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mine-quick-img-icon .home-auth-quick-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.mine-yuebao-icon-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.mine-yuebao-rate-bubble {
    position: absolute;
    top: -4px;
    right: -14px;
    z-index: 2;
    background: #ff5252;
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 8px;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(255, 82, 82, 0.4);
    pointer-events: none;
}

.mine-action-item--yuebao {
    overflow: visible;
}

/* ===== Mine Page — Scheme B (红色顶栏沉浸 + 钱包上浮) ===== */
.mine-page--b .mine-hero-bg {
    height: 230px;
    background:
        radial-gradient(ellipse 70% 80% at 100% 0%, rgba(255, 255, 255, 0.1) 0%, transparent 55%),
        radial-gradient(ellipse 50% 60% at 0% 100%, rgba(0, 0, 0, 0.1) 0%, transparent 50%),
        linear-gradient(180deg, #E63935 0%, #D32F2F 50%, #C62828 100%);
}

.mine-page--b .mine-settings-btn {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: none;
}

.mine-page--b .mine-username,
.mine-page--b a.mine-username {
    color: #fff;
}

.mine-page--b .mine-invite-row,
.mine-page--b a.mine-invite-row {
    color: rgba(255, 255, 255, 0.82);
}

.mine-page--b .mine-copy-btn {
    color: rgba(255, 255, 255, 0.78);
}

.mine-page--b a.mine-auth-trigger {
    color: rgba(255, 255, 255, 0.92);
}

.mine-page--b .mine-avatar {
    border: 2px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
}

.mine-page--b .mine-vip-pill {
    background: linear-gradient(135deg, #fffdf5 0%, #ffe082 45%, #ffca28 100%);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.mine-page--b .mine-profile-row {
    padding-bottom: 38px;
}

.mine-page--b .mine-wallet-block {
    margin: -30px 14px 12px;
    z-index: 4;
    border: none;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}

.mine-page--b .mine-wallet-card {
    background: #fff;
}

.mine-page--b .mine-wallet-guest {
    background: #fff;
}

.mine-page--b .mine-action-panel--solo {
    margin: -24px 14px 12px;
    z-index: 4;
    border: none;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}

/* ===== Mine Page — Scheme C (极简白底 + 红色点缀) ===== */
body.page-mine:has(.mine-page--c) {
    background: #fff;
}

.mine-page--c .mine-hero-bg {
    display: none;
}

.mine-page--c .mine-top-bar {
    padding-top: 12px;
}

.mine-page--c .mine-settings-btn {
    color: #999;
    background: #f5f5f5;
    border: none;
    box-shadow: none;
}

.mine-page--c .mine-profile-row {
    padding: 4px 16px 14px;
}

.mine-page--c .mine-username,
.mine-page--c a.mine-username {
    color: #222;
}

.mine-page--c .mine-invite-row,
.mine-page--c a.mine-invite-row {
    color: #999;
}

.mine-page--c .mine-copy-btn {
    color: #ccc;
}

.mine-page--c a.mine-auth-trigger {
    color: inherit;
}

.mine-page--c .mine-avatar {
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.mine-page--c .mine-vip-pill {
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2);
}

.mine-page--c .mine-wallet-block {
    margin: 0 14px 10px;
    z-index: 2;
    border: 1px solid #f0f0f0;
    box-shadow: none;
}

.mine-page--c .mine-wallet-card {
    background: #fff;
}

.mine-page--c .mine-wallet-guest {
    background: #fff;
}

.mine-page--c .mine-action-panel {
    border-top: 1px solid #f5f5f5;
}

.mine-page--c .mine-action-panel--solo {
    margin: 0 14px 10px;
    z-index: 2;
    border: 1px solid #f0f0f0;
    box-shadow: none;
}

.mine-page--c .mine-rebate-btn {
    background: #ff5858;
    color: #fff;
    border: none;
}

.mine-page--c .mine-func-section {
    margin-top: 0;
}

.mine-page--c .mine-func-card {
    border: 1px solid #f0f0f0;
    box-shadow: none;
}

.mine-page--c .mine-menu--grid {
    border: 1px solid #f0f0f0;
    box-shadow: none;
}

.mine-page--c .mine-promo-share,
.mine-page--c .mine-promo-checkin {
    background: #fafafa;
    border: 1px solid #f0f0f0;
}

.mine-page--c .mine-promo-text strong {
    color: #333;
}

.mine-page--c .mine-logout-btn {
    border: 1px solid #f0f0f0;
    box-shadow: none;
}

/* ===== 交易明细 ===== */
.tx-page {
    padding: 12px 14px 80px;
}

.tx-filter-tabs {
    margin-bottom: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    padding: 0 2px;
}
.tx-filter-tabs::-webkit-scrollbar {
    display: none;
}
.tx-filter-tabs .filter-tab {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 10px 12px;
    font-size: 13px;
    text-decoration: none;
}

.tx-empty {
    text-align: center;
    color: #999;
    padding: 48px 16px;
    font-size: 14px;
}

.tx-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tx-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.tx-item-title {
    font-size: 15px;
    font-weight: 600;
    color: #222;
}

.tx-item-note {
    margin-top: 4px;
    font-size: 13px;
    color: #888;
}

.tx-item-time {
    margin-top: 6px;
    font-size: 12px;
    color: #bbb;
}

.tx-item-side {
    text-align: right;
    flex-shrink: 0;
}

.tx-item-amount {
    font-size: 16px;
    font-weight: 700;
    color: #333;
}

.tx-item-amount--plus {
    color: #e53935;
}

.tx-item-amount--minus {
    color: #43a047;
}

.tx-item-status-row {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.tx-item-status {
    font-size: 12px;
    color: #999;
}

.tx-note-hint {
    width: 16px;
    height: 16px;
    padding: 0;
    border: 1px solid #ccc;
    border-radius: 50%;
    background: #f5f5f5;
    color: #999;
    font-size: 11px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.tx-note-hint:active {
    background: #eee;
}

.tx-note-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.tx-note-modal[hidden] {
    display: none !important;
}

.tx-note-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.tx-note-modal-panel {
    position: relative;
    width: 100%;
    max-width: 320px;
    background: #fff;
    border-radius: 14px;
    padding: 20px 18px 16px;
    text-align: center;
}

.tx-note-modal-title {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 12px;
}

.tx-note-modal-body {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    text-align: left;
    word-break: break-word;
    margin-bottom: 16px;
}

.tx-note-modal-btn {
    width: 100%;
    border: none;
    border-radius: 22px;
    padding: 11px 16px;
    background: linear-gradient(135deg, #ff6b35, #ff3d1f);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

/* ===== 我的消息 ===== */
.msg-page {
    padding: 12px 14px 80px;
}

.msg-empty {
    text-align: center;
    color: #999;
    padding: 48px 16px;
    font-size: 14px;
}

.msg-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.msg-item {
    background: #fff;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.msg-item-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}

.msg-item-title {
    font-size: 15px;
    font-weight: 600;
    color: #222;
}

.msg-item-time {
    font-size: 12px;
    color: #bbb;
    flex-shrink: 0;
}

.msg-item-body {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

.tx-status--success {
    color: #43a047;
}

.tx-status--pending {
    color: #ff9800;
}

.tx-status--fail {
    color: #e53935;
}

/* ===== VIP 等级 ===== */
body.page-vip {
    background: #f7f2ee;
}

.vip-page {
    position: relative;
    min-height: 100vh;
    padding: 0 0 calc(24px + env(safe-area-inset-bottom));
    overflow-x: hidden;
}

.vip-page-bg {
    position: absolute;
    inset: 0 0 auto 0;
    height: 280px;
    background: linear-gradient(180deg, #fbe9df 0%, #f7f2ee 100%);
    pointer-events: none;
    z-index: 0;
}

.vip-page-diamond {
    position: absolute;
    top: -10px;
    right: -18px;
    width: 180px;
    height: 180px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.55), rgba(255, 220, 200, 0.2));
    transform: rotate(45deg);
    border-radius: 18px;
    opacity: 0.55;
}

.vip-nav,
.vip-user,
.vip-progress-panel,
.vip-level-track,
.vip-privilege {
    position: relative;
    z-index: 1;
}

.vip-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 0;
}

.vip-nav-back {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 1;
    color: #1a1d26;
    text-decoration: none;
}

.vip-nav-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1d26;
}

.vip-nav-spacer {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.vip-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 8px;
}

.vip-user-avatar {
    width: 42px;
    height: 42px;
    font-size: 24px;
    box-shadow: 0 3px 10px rgba(255, 112, 67, 0.22);
}

.vip-user-name {
    font-size: 16px;
    font-weight: 700;
    color: #1a1d26;
}

.vip-user-main {
    min-width: 0;
}

.vip-user-level {
    margin-top: 3px;
    font-size: 12px;
    color: #8a93a3;
}

.vip-progress-panel {
    margin: 16px 16px 24px;
    padding: 14px 14px 12px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
}

.vip-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.vip-progress-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a1d26;
}

.vip-progress-target {
    font-size: 12px;
    font-weight: 600;
    color: #e53935;
    background: #ffebee;
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.vip-progress-target--max {
    color: #2e7d32;
    background: #e8f5e9;
}

.vip-progress-item + .vip-progress-item {
    margin-top: 14px;
}

.vip-progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.vip-progress-label {
    font-size: 13px;
    color: #5a6270;
}

.vip-progress-num {
    font-size: 12px;
    color: #8a93a3;
    white-space: nowrap;
}

.vip-progress-num strong {
    font-size: 14px;
    color: #e53935;
    font-weight: 700;
}

.vip-progress-split {
    margin: 0 2px;
}

.vip-progress-bar {
    height: 6px;
    border-radius: 999px;
    background: #f0f2f5;
    overflow: hidden;
}

.vip-progress-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ef5350, #e53935);
    transition: width 0.3s ease;
}

.vip-progress-remain {
    margin-top: 8px;
    font-size: 12px;
    color: #8a93a3;
    line-height: 1.5;
}

.vip-progress-remain strong {
    color: #e53935;
    font-weight: 700;
}

.vip-progress-tip {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #eceff3;
    font-size: 12px;
    color: #8a93a3;
    line-height: 1.5;
}

.vip-level-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 0 16px 16px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.vip-level-track::-webkit-scrollbar {
    display: none;
}

.vip-level-card {
    flex: 0 0 calc(100% - 42px);
    max-width: 360px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    background: linear-gradient(145deg, var(--vip-bg-1, #f5f7fa) 0%, var(--vip-bg-2, #e7ebf0) 100%);
    border: 1px solid var(--vip-border, rgba(138, 147, 163, 0.18));
    border-radius: 14px;
    padding: 16px 18px 18px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.vip-level-card.is-current {
    box-shadow: var(--vip-shadow, 0 10px 28px rgba(198, 146, 61, 0.18));
}

.vip-level-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.vip-level-card-title {
    font-size: 18px;
    font-weight: 800;
    color: #1a1d26;
}

.vip-level-card-num {
    color: var(--vip-accent, #b87333);
    letter-spacing: 0.02em;
}

.vip-level-card .vip-level-stat-value strong {
    color: var(--vip-accent, #c9923d);
}

.vip-level-badge {
    position: relative;
    width: 72px;
    flex-shrink: 0;
}

.vip-level-badge-img {
    width: 100%;
    height: auto;
    display: block;
}

.vip-level-badge-text {
    position: absolute;
    left: 50%;
    bottom: 2%;
    transform: translateX(-50%);
    width: 78%;
    height: 18%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
    pointer-events: none;
}

.vip-level-card-divider {
    height: 1px;
    margin-bottom: 16px;
    background: repeating-linear-gradient(90deg, #e8eaed 0, #e8eaed 6px, transparent 6px, transparent 12px);
}

.vip-level-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.vip-level-stat {
    text-align: center;
}

.vip-level-stat-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-bottom: 6px;
}

.vip-level-stat-value strong {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.1;
}

.vip-level-stat-label {
    font-size: 14px;
    color: #8a93a3;
}

.vip-feather {
    width: 16px;
    height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d4a24e;
    filter: drop-shadow(0 1px 1px rgba(201, 146, 61, 0.25));
}

.vip-feather svg {
    width: 100%;
    height: 100%;
}

.vip-feather--r {
    transform: scaleX(-1);
}

.vip-privilege {
    padding: 0 16px;
}

.vip-privilege-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
}

.vip-privilege-title {
    font-size: 18px;
    font-weight: 800;
    color: #1a1d26;
    white-space: nowrap;
}

.vip-privilege-wing {
    width: 42px;
    height: 8px;
    background: linear-gradient(90deg, transparent, #ef5350 35%, #ef5350 100%);
    border-radius: 999px;
    opacity: 0.85;
}

.vip-privilege-wing--r {
    transform: scaleX(-1);
}

.vip-privilege-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}

.vip-mini-card {
    background: #fff;
    border-radius: 12px;
    padding: 12px 8px 10px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    width: 100%;
}

.vip-claim-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 26px;
    margin-top: 8px;
    padding: 0 12px;
    border: none;
    border-radius: 13px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: #e0e0e0;
    cursor: not-allowed;
}

.vip-claim-btn.is-claimable {
    background: linear-gradient(135deg, #e53935, #ef5350);
    box-shadow: 0 3px 10px rgba(229, 57, 53, 0.22);
    cursor: pointer;
}

.vip-claim-btn.is-claimable:active {
    transform: scale(0.96);
}

.vip-claim-btn.is-claimed {
    background: #f0f2f5;
    color: #8a93a3;
    cursor: default;
}

.vip-claim-btn--inline {
    margin-top: 6px;
    min-width: 48px;
    height: 24px;
    font-size: 11px;
}

.vip-mini-icon {
    width: 46px;
    height: 46px;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 1;
}

.vip-mini-icon--cs {
    font-size: 0;
}

.vip-mini-cs-icon svg {
    width: 34px;
    height: 34px;
}

.vip-mini-label {
    font-size: 12px;
    color: #8a93a3;
    margin-bottom: 4px;
}

.vip-mini-value {
    font-size: 14px;
    font-weight: 700;
    color: #1a1d26;
}

.vip-mini-value--red {
    color: #e53935;
}

.vip-mini-value--gold {
    color: #ff8f00;
}

.vip-mini-sub {
    font-size: 14px;
    font-weight: 700;
    color: #ff8f00;
}

.vip-salary-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 10px;
    padding: 14px 14px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    text-align: left;
}

.vip-salary-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

.vip-salary-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
}

.vip-salary-body {
    flex: 1;
    min-width: 0;
}

.vip-salary-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a1d26;
    margin-bottom: 4px;
}

.vip-salary-desc {
    font-size: 11px;
    color: #8a93a3;
    line-height: 1.45;
}

.vip-salary-amount {
    font-size: 18px;
    font-weight: 800;
    color: #e53935;
    flex-shrink: 0;
    line-height: 1.2;
}

/* ===== Responsive ===== */
@media (min-width: 481px) {
    body { box-shadow: 0 0 20px rgba(0,0,0,0.1); }
}