/* ===== 空投盒子 ===== */

/* 空投盒子容器 - 固定在右上角，与用户信息面板对齐 */
#airdrop-box {
    position: fixed;
    top: 58px;
    right: 12px;
    z-index: 9998;
    width: 64px;
    height: 64px;
    cursor: pointer;
    pointer-events: auto;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#airdrop-box.airdrop-box-hidden {
    opacity: 0;
    transform: scale(0.3) translateY(-20px);
    pointer-events: none;
}

#airdrop-box.airdrop-box-visible {
    opacity: 1;
    transform: scale(1) translateY(0);
    animation: airdropBoxAppear 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* 盒子图片 - 快速闪烁发光 */
.airdrop-box-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    border-radius: 12px;
    animation: airdropBoxBlink 0.6s ease-in-out infinite;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6)) drop-shadow(0 0 16px rgba(251, 191, 36, 0.3));
}

/* 盒子出现动画 */
@keyframes airdropBoxAppear {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(-20px);
    }
    50% {
        transform: scale(1.15) translateY(0);
    }
    70% {
        transform: scale(0.95) translateY(0);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* 盒子快速闪烁发光 */
@keyframes airdropBoxBlink {
    0%, 100% {
        opacity: 1;
        filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6)) drop-shadow(0 0 16px rgba(251, 191, 36, 0.3));
        transform: scale(1);
    }
    25% {
        opacity: 0.85;
        filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.9)) drop-shadow(0 0 24px rgba(251, 191, 36, 0.5));
        transform: scale(1.05);
    }
    50% {
        opacity: 1;
        filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6)) drop-shadow(0 0 16px rgba(251, 191, 36, 0.3));
        transform: scale(1);
    }
    75% {
        opacity: 0.9;
        filter: drop-shadow(0 0 14px rgba(251, 191, 36, 1)) drop-shadow(0 0 28px rgba(251, 191, 36, 0.6));
        transform: scale(1.03);
    }
}

/* ===== 空投领取弹窗 ===== */

/* 遮罩层 */
.airdrop-claim-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.airdrop-claim-overlay.active {
    opacity: 1;
}

/* 弹窗主体 */
.airdrop-claim-modal {
    width: 300px;
    max-width: 88vw;
    max-height: 70vh;
    background: linear-gradient(145deg, rgba(30, 30, 40, 0.96), rgba(20, 20, 28, 0.96));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    padding: 24px 20px 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 16px;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
}

.airdrop-claim-modal.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* 标题 */
.airdrop-claim-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* 空投列表 */
.airdrop-claim-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
}

.airdrop-claim-list::-webkit-scrollbar {
    width: 3px;
}

.airdrop-claim-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}

/* 单个空投项 */
.airdrop-claim-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.2s ease;
}

.airdrop-claim-item:active {
    background: rgba(255, 255, 255, 0.08);
}

/* 空投图标 */
.airdrop-claim-icon {
    font-size: 28px;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

/* 空投信息 */
.airdrop-claim-info {
    flex: 1;
    min-width: 0;
}

.airdrop-claim-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 2px;
    line-height: 1.3;
}

.airdrop-claim-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.3;
}

/* 领取按钮 */
.airdrop-claim-btn {
    flex-shrink: 0;
    padding: 8px 16px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 3px 12px rgba(251, 191, 36, 0.25);
    letter-spacing: 0.3px;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.airdrop-claim-btn:active {
    transform: scale(0.94);
    box-shadow: 0 1px 6px rgba(251, 191, 36, 0.15);
}

.airdrop-claim-btn:disabled {
    opacity: 0.6;
    transform: none;
    cursor: not-allowed;
}

/* 关闭按钮 */
.airdrop-claim-close {
    width: 100%;
    padding: 12px 0;
    border: none;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.3px;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    margin-top: 4px;
}

.airdrop-claim-close:active {
    background: rgba(255, 255, 255, 0.12);
    transform: scale(0.97);
}

/* ===== 空投领取结果提示 ===== */

.airdrop-result-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    z-index: 10001;
    padding: 20px 28px;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    line-height: 1.6;
    letter-spacing: 0.5px;
    white-space: pre-line;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    max-width: 80vw;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.airdrop-result-toast.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.airdrop-result-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.9), rgba(5, 150, 105, 0.9));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(52, 211, 153, 0.3);
    color: #fff;
}

.airdrop-result-fail {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(220, 38, 38, 0.9));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(248, 113, 113, 0.3);
    color: #fff;
}

/* ===== 未启用土地块提示弹窗 ===== */

/* 遮罩层 */
.land-locked-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity 0.3s ease;
}

/* 弹窗主体 */
.land-locked-modal {
    width: 260px;
    max-width: 80vw;
    background: linear-gradient(145deg, rgba(30, 30, 40, 0.96), rgba(20, 20, 28, 0.96));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    padding: 32px 24px 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 提示文字 */
.land-locked-msg {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    line-height: 1.5;
}

/* 关闭按钮 */
.land-locked-close-btn {
    width: 100%;
    padding: 12px 0;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 16px rgba(251, 191, 36, 0.3);
}

.land-locked-close-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(251, 191, 36, 0.4);
}

.land-locked-close-btn:active {
    transform: scale(0.97);
}

/* ===== 点击星星特效容器 ===== */

#click-effects {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.click-star {
    position: absolute;
    pointer-events: none;
    font-size: 18px;
    animation: starBurst 0.8s ease-out forwards;
    opacity: 0;
}

@keyframes starBurst {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.3) rotate(360deg);
    }
}

/* ===== 加载页面（动态特效） ===== */

/* 加载遮罩层 */
#loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 30%, #16213e 60%, #0f3460 100%);
    overflow: hidden;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 加载遮罩层 - 隐藏状态（淡出并缩放） */
#loader-overlay.loader-hidden {
    opacity: 0;
    transform: scale(1.1);
    pointer-events: none;
}

/* 粒子画布 */
#loader-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* 动态光晕 1 */
#loader-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.05) 40%, transparent 70%);
    top: 20%;
    left: 30%;
    z-index: 1;
    animation: loaderGlowFloat 6s ease-in-out infinite;
    pointer-events: none;
}

/* 动态光晕 2 */
#loader-glow-2 {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.1) 0%, rgba(251, 191, 36, 0.03) 40%, transparent 70%);
    bottom: 10%;
    right: 20%;
    z-index: 1;
    animation: loaderGlowFloat2 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes loaderGlowFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(60px, -40px) scale(1.2); }
    66% { transform: translate(-30px, 30px) scale(0.9); }
}

@keyframes loaderGlowFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-50px, 30px) scale(1.1); }
    66% { transform: translate(40px, -20px) scale(0.85); }
}

/* 加载内容容器 */
#loader-container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    animation: loaderContainerIn 1s ease-out;
}

@keyframes loaderContainerIn {
    0% { opacity: 0; transform: translateY(30px) scale(0.9); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* 加载图标（带呼吸动画） */
#loader-icon {
    font-size: 64px;
    animation: loaderIconBreathe 2s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(34, 197, 94, 0.4));
    user-select: none;
}

@keyframes loaderIconBreathe {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.1) rotate(-5deg); }
    50% { transform: scale(1.15) rotate(0deg); }
    75% { transform: scale(1.05) rotate(5deg); }
}

/* 加载标题 */
#loader-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
    user-select: none;
}

/* 进度条背景 */
#loader-progress-bar-bg {
    width: 260px;
    max-width: 70vw;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: visible;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* 进度条填充 */
#loader-progress-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 3px;
    background: linear-gradient(90deg, #22c55e, #4ade80, #22d3ee);
    background-size: 200% 100%;
    animation: loaderBarShimmer 2s linear infinite;
    transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
}

@keyframes loaderBarShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* 进度条光晕 */
#loader-progress-glow {
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: 0;
    width: 20px;
    background: rgba(255, 255, 255, 0.3);
    filter: blur(6px);
    border-radius: 3px;
    animation: loaderGlowSweep 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes loaderGlowSweep {
    0%, 100% { left: -10px; opacity: 0; }
    50% { opacity: 1; }
    80% { left: calc(100% - 10px); opacity: 0; }
}

/* 进度百分比文字 */
#loader-progress-text {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
    letter-spacing: 1px;
    user-select: none;
    font-variant-numeric: tabular-nums;
    transition: all 0.3s ease;
}

/* 状态文字 */
#loader-status {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.5px;
    user-select: none;
    animation: loaderStatusPulse 2s ease-in-out infinite;
}

@keyframes loaderStatusPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* ===== 全局重置 ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: #000;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    position: relative;
    touch-action: manipulation;
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* 全局禁止文本选中高亮 */
::selection {
    background: transparent;
}
::-moz-selection {
    background: transparent;
}


/* ===== 游戏容器 ===== */
#game-container {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    overscroll-behavior: none;
    background: #000;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}


/* ===== 左上角用户信息面板 ===== */
#user-panel {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    padding: 5px 10px 5px 5px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    position: relative;
}

.user-avatar::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}



.user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1px;
    min-width: 0;
}


.user-name {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.3px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.level-bar {
    display: flex;
    align-items: center;
    gap: 4px;
}

.level-bar-bg {
    width: 56px;
    height: 5px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.level-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #fbbf24, #f59e0b, #f97316);
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.5);
    transition: width 0.6s ease;
    position: relative;
}

.level-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 100%);
    border-radius: 3px 3px 0 0;
}

.level-text {
    font-size: 9px;
    font-weight: 700;
    color: #fbbf24;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    letter-spacing: 0.3px;
}



/* ===== 通知弹窗 ===== */

/* 通知列表遮罩 */
#notify-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity 0.3s ease;
}

#notify-overlay.notify-hidden {
    opacity: 0;
    pointer-events: none;
}

#notify-modal {
    width: 320px;
    max-width: 90vw;
    max-height: 75vh;
    background: linear-gradient(145deg, rgba(30, 30, 40, 0.96), rgba(20, 20, 28, 0.96));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    overflow: hidden;
    animation: profileSlideUp 0.35s ease-out;
    display: flex;
    flex-direction: column;
}

.notify-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.notify-title {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}

#notify-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

#notify-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.notify-list {
    overflow-y: auto;
    padding: 8px 12px 12px;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}

.notify-list::-webkit-scrollbar {
    width: 3px;
}

.notify-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}

.notify-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.notify-item:active {
    background: rgba(255, 255, 255, 0.08);
    transform: scale(0.98);
}

.notify-item-content {
    flex: 1;
    min-width: 0;
}

.notify-item-title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 3px;
    line-height: 1.3;
}

.notify-item-preview {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 4px;
}

.notify-item-time {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
}

.notify-item-badge {
    font-size: 9px;
    font-weight: 700;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.15);
    padding: 2px 7px;
    border-radius: 6px;
    border: 1px solid rgba(251, 191, 36, 0.2);
    flex-shrink: 0;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 通知详情弹窗 */
#notify-detail-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity 0.3s ease;
}

#notify-detail-overlay.notify-hidden {
    opacity: 0;
    pointer-events: none;
}

#notify-detail-modal {
    width: 320px;
    max-width: 90vw;
    background: linear-gradient(145deg, rgba(30, 30, 40, 0.96), rgba(20, 20, 28, 0.96));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    overflow: hidden;
    animation: profileSlideUp 0.35s ease-out;
}

.notify-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#notify-detail-back {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

#notify-detail-back:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.notify-detail-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

#notify-detail-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

#notify-detail-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.notify-detail-body {
    padding: 28px 24px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.notify-detail-name {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
    text-align: center;
}

.notify-detail-time {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 20px;
}

.notify-detail-divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin-bottom: 20px;
}

.notify-detail-text {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
    text-align: center;
    letter-spacing: 0.3px;
}


/* ===== 更换头像弹窗 ===== */
#avatar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity 0.3s ease;
}

#avatar-overlay.avatar-hidden {
    opacity: 0;
    pointer-events: none;
}

#avatar-modal {
    width: 280px;
    max-width: 85vw;
    background: linear-gradient(145deg, rgba(30, 30, 40, 0.96), rgba(20, 20, 28, 0.96));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    padding: 28px 20px 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    position: relative;
    animation: profileSlideUp 0.35s ease-out;
}

#avatar-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

#avatar-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.avatar-title {
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.avatar-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.avatar-option {
    aspect-ratio: 1;
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    background: rgba(255, 255, 255, 0.03);
}

.avatar-option img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.avatar-option:hover {
    border-color: rgba(251, 191, 36, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(251, 191, 36, 0.15);
}

.avatar-option:hover img {
    transform: scale(1.08);
}

.avatar-option:active {
    transform: scale(0.95);
}

/* 上传自定义头像区域 */
.avatar-upload-section {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
}

#avatar-upload-btn {
    width: 100%;
    padding: 12px 0;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(59, 130, 246, 0.2));
    border: 1px solid rgba(96, 165, 250, 0.25);
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    letter-spacing: 0.3px;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}

#avatar-upload-btn:active {
    transform: scale(0.96);
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.3), rgba(59, 130, 246, 0.3));
}

#avatar-upload-btn:disabled {
    opacity: 0.5;
    transform: none;
    cursor: not-allowed;
}

/* ===== 个人信息弹窗 ===== */

/* 遮罩层 */
#profile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity 0.3s ease;
}

#profile-overlay.profile-hidden {
    opacity: 0;
    pointer-events: none;
}

/* 弹窗主体 */
#profile-modal {
    width: 300px;
    max-width: 88vw;
    background: linear-gradient(145deg, rgba(30, 30, 40, 0.95), rgba(20, 20, 28, 0.95));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    padding: 0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
    animation: profileSlideUp 0.35s ease-out;
}

@keyframes profileSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 关闭按钮 */
#profile-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

#profile-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* 弹窗头部 */
.profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 24px 20px;
    background: linear-gradient(180deg, rgba(251, 191, 36, 0.08) 0%, transparent 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: visible;
    border: 3px solid rgba(251, 191, 36, 0.4);
    box-shadow: 0 4px 20px rgba(251, 191, 36, 0.2);
    margin-bottom: 10px;
    position: relative;
    cursor: pointer;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

/* 个人信息弹窗头像右下角更换图标 */
.profile-avatar-change-icon {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    pointer-events: none;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: transform 0.2s ease, background 0.2s ease;
}

.profile-avatar:hover .profile-avatar-change-icon {
    transform: scale(1.1);
    background: rgba(251, 191, 36, 0.7);
}


.profile-name {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.profile-level-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.profile-level-badge {
    font-size: 11px;
    font-weight: 700;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.15);
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
    border: 1px solid rgba(251, 191, 36, 0.2);
}

.profile-level-bar-bg {
    flex: 1;
    height: 7px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.profile-level-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #fbbf24, #f59e0b, #f97316);
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
    transition: width 0.6s ease;
    position: relative;
}

.profile-level-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 100%);
    border-radius: 4px 4px 0 0;
}

.profile-level-progress {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
}

/* 弹窗身体 - 统计数据 */
.profile-body {
    padding: 16px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.profile-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    transition: background 0.2s ease;
}

.profile-stat:hover {
    background: rgba(255, 255, 255, 0.06);
}

.profile-stat-label {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.3px;
}

.profile-stat-value {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.3px;
}


/* ===== 银行账户弹窗 ===== */

/* 遮罩层 - 复用 profile-hidden 类 */
#bank-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity 0.3s ease;
}

#bank-overlay.profile-hidden {
    opacity: 0;
    pointer-events: none;
}

/* 弹窗主体 */
#bank-modal {
    width: 320px;
    max-width: 88vw;
    max-height: 80vh;
    background: linear-gradient(145deg, rgba(30, 30, 40, 0.96), rgba(20, 20, 28, 0.96));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    padding: 0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
    animation: profileSlideUp 0.35s ease-out;
}

/* 关闭按钮 */
#bank-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

#bank-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* 弹窗头部 */
.bank-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 24px 16px;
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.08) 0%, transparent 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.bank-header-icon {
    font-size: 36px;
    margin-bottom: 8px;
}

.bank-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.bank-subtitle {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 4px;
    text-align: center;
}

/* 弹窗身体 */
.bank-body {
    padding: 16px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    max-height: 55vh;
}

.bank-body::-webkit-scrollbar {
    width: 3px;
}

.bank-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}

/* 已绑定信息展示 */
.bank-info-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 4px;
}

.bank-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.bank-info-row:last-child {
    border-bottom: none;
}

.bank-info-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

.bank-info-value {
    font-size: 13px;
    color: #fff;
    font-weight: 600;
    text-align: right;
    max-width: 60%;
    word-break: break-all;
}

.bank-info-value.usdt {
    color: #26a17b;
    font-family: monospace;
    font-size: 12px;
}

/* 空状态提示 */
.bank-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 0;
    gap: 8px;
}

.bank-empty-icon {
    font-size: 48px;
    opacity: 0.5;
}

.bank-empty-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
}

/* 绑定表单 */
.bank-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bank-form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bank-form-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.3px;
}

.bank-form-input {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
    box-sizing: border-box;
}

.bank-form-input:focus {
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(255, 255, 255, 0.08);
}

.bank-form-input::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

/* 表单分割线 */
.bank-form-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
}

.bank-form-divider::before,
.bank-form-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.bank-form-divider-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
    white-space: nowrap;
    font-weight: 500;
}

/* 按钮 */
.bank-btn {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: none;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.5px;
}

.bank-btn-primary {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
}

.bank-btn-primary:active {
    transform: scale(0.97);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

.bank-btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.bank-btn-secondary:active {
    background: rgba(255, 255, 255, 0.12);
    transform: scale(0.97);
}

/* 成功提示 */
.bank-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 0;
    gap: 12px;
}

.bank-success-icon {
    font-size: 56px;
    animation: bankSuccessPop 0.5s ease-out;
}

@keyframes bankSuccessPop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.bank-success-text {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.bank-success-sub {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
}


/* ===== 提现弹窗 ===== */
#withdraw-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity 0.3s ease;
}

#withdraw-overlay.profile-hidden {
    opacity: 0;
    pointer-events: none;
}

/* 提现弹窗主体 */
#withdraw-modal {
    width: 320px;
    max-width: 88vw;
    max-height: 80vh;
    background: linear-gradient(145deg, rgba(30, 30, 40, 0.96), rgba(20, 20, 28, 0.96));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    padding: 0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
    animation: profileSlideUp 0.35s ease-out;
}

/* 关闭按钮 */
#withdraw-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

#withdraw-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* 弹窗头部 */
.withdraw-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 24px 16px;
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.08) 0%, transparent 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.withdraw-header-icon {
    font-size: 36px;
    margin-bottom: 8px;
}

.withdraw-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.withdraw-subtitle {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 4px;
    text-align: center;
}

/* 弹窗身体 */
.withdraw-body {
    padding: 16px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    max-height: 55vh;
}

.withdraw-body::-webkit-scrollbar {
    width: 3px;
}

.withdraw-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}

/* 提现表单 */
.withdraw-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.withdraw-form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.withdraw-form-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.3px;
}

.withdraw-form-input {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
    box-sizing: border-box;
}

.withdraw-form-input:focus {
    border-color: rgba(16, 185, 129, 0.5);
    background: rgba(255, 255, 255, 0.08);
}

.withdraw-form-input::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

.withdraw-form-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 货币选择按钮组 */
.withdraw-currency-group {
    display: flex;
    gap: 8px;
}

.withdraw-currency-btn {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.withdraw-currency-btn:active {
    transform: scale(0.96);
}

.withdraw-currency-btn.active {
    border-color: #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(16, 185, 129, 0.15));
    color: #34d399;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: scale(1.02);
}

/* 汇率信息 */
.withdraw-rate-info {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    line-height: 1.5;
}

.withdraw-rate-info .rate-highlight {
    color: #fbbf24;
    font-weight: 600;
}

/* 手续费信息 */
.withdraw-fee-info {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    line-height: 1.5;
    margin-top: 4px;
}

.withdraw-fee-info .fee-highlight {
    color: #f87171;
    font-weight: 600;
}

/* 换算结果 */
.withdraw-convert-result {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    line-height: 1.5;
}

.withdraw-convert-result .gold-highlight {
    color: #fbbf24;
    font-weight: 700;
    font-size: 15px;
}

/* 账户选择 */
.withdraw-account-select {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.withdraw-account-select:focus {
    border-color: rgba(16, 185, 129, 0.5);
}

.withdraw-account-select option {
    background: #1a1a2e;
    color: #fff;
}

/* 提现按钮 */
.withdraw-btn {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: none;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.5px;
}

.withdraw-btn-primary {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.withdraw-btn-primary:active {
    transform: scale(0.97);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.withdraw-btn-primary:disabled {
    opacity: 0.5;
    transform: none;
    cursor: not-allowed;
    box-shadow: none;
}

.withdraw-btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.withdraw-btn-secondary:active {
    background: rgba(255, 255, 255, 0.12);
    transform: scale(0.97);
}

/* 提现成功提示 */
.withdraw-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 0;
    gap: 12px;
}

.withdraw-success-icon {
    font-size: 56px;
    animation: bankSuccessPop 0.5s ease-out;
}

.withdraw-success-text {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.withdraw-success-sub {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    line-height: 1.5;
}

/* 提现错误提示 */
.withdraw-error {
    font-size: 12px;
    color: #f87171;
    text-align: center;
    padding: 4px 0;
}

/* 提现加载状态 */
.withdraw-loading {
    text-align: center;
    padding: 30px 0;
    color: rgba(255, 255, 255, 0.4);
    font-size: 14px;
}

/* ===== 充值弹窗 ===== */
#recharge-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity 0.3s ease;
}

#recharge-overlay.profile-hidden {
    opacity: 0;
    pointer-events: none;
}

/* 充值弹窗主体 */
#recharge-modal {
    width: 320px;
    max-width: 88vw;
    max-height: 80vh;
    background: linear-gradient(145deg, rgba(30, 30, 40, 0.96), rgba(20, 20, 28, 0.96));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    padding: 0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
    animation: profileSlideUp 0.35s ease-out;
}

/* 关闭按钮 */
#recharge-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

#recharge-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* 充值弹窗头部 */
.recharge-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 24px 16px;
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.08) 0%, transparent 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.recharge-header-icon {
    font-size: 36px;
    margin-bottom: 8px;
}

.recharge-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.recharge-subtitle {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 4px;
    text-align: center;
}

/* 充值弹窗身体 */
.recharge-body {
    padding: 16px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    max-height: 55vh;
}

.recharge-body::-webkit-scrollbar {
    width: 3px;
}

.recharge-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}

/* 汇率信息卡片 */
.recharge-rate-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.recharge-rate-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.recharge-rate-label {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

.recharge-rate-value {
    color: #34d399;
    font-weight: 700;
    font-family: monospace;
}

/* 支付方式选择 */
.recharge-payment-title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 2px;
}

.recharge-payment-options {
    display: flex;
    gap: 8px;
}

.recharge-payment-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 8px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.recharge-payment-option:active {
    transform: scale(0.97);
}

.recharge-payment-option.active {
    border-color: #34d399;
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.25), rgba(52, 211, 153, 0.12));
    color: #34d399;
    box-shadow: 0 0 20px rgba(52, 211, 153, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: scale(1.02);
}

.recharge-payment-option-icon {
    font-size: 18px;
}

/* 金额输入 */
.recharge-amount-title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 2px;
}

.recharge-amount-input-wrapper {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0 14px;
    transition: border-color 0.2s ease;
}

.recharge-amount-input-wrapper:focus-within {
    border-color: rgba(52, 211, 153, 0.5);
}

.recharge-amount-currency {
    font-size: 16px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    padding-right: 10px;
    white-space: nowrap;
}

.recharge-amount-input {
    flex: 1;
    padding: 12px 0;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    outline: none;
    min-width: 0;
    font-family: monospace;
}

.recharge-amount-input::placeholder {
    color: rgba(255, 255, 255, 0.2);
}

/* 计算得到的 okCoin 数量 */
.recharge-calc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    background: rgba(52, 211, 153, 0.06);
    border: 1px solid rgba(52, 211, 153, 0.15);
    border-radius: 10px;
}

.recharge-calc-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

.recharge-calc-value {
    font-size: 16px;
    font-weight: 800;
    color: #34d399;
    font-family: monospace;
}

/* 充值按钮 */
.recharge-btn {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: none;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.5px;
}

.recharge-btn-primary {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.recharge-btn-primary:active {
    transform: scale(0.97);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.recharge-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* 充值成功提示 */
.recharge-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 0;
    gap: 12px;
}

.recharge-success-icon {
    font-size: 56px;
    animation: bankSuccessPop 0.5s ease-out;
}

.recharge-success-text {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.recharge-success-sub {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    line-height: 1.5;
}

/* ===== 右上角操作按钮（购买、提现） ===== */
#top-right-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 200;
    display: flex;
    flex-direction: row;
    gap: 6px;
    pointer-events: none;
}


.top-right-btn {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.top-right-btn:active {
    transform: scale(0.92);
    opacity: 0.8;
}

.top-right-btn-icon {
    font-size: 16px;
    line-height: 1;
}

.top-right-btn-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.5px;
}

/* ===== 左上角快捷操作按钮 ===== */
#quick-actions {
    position: absolute;
    top: 58px;
    left: 10px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.quick-btn {
    cursor: pointer;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s ease;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    border: none;
    background: none;
    box-shadow: none;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.quick-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

.quick-btn:active {
    transform: scale(0.88);
}

/* 分享按钮 - 最大，带呼吸放大缩小效果 */
@keyframes sharePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
}

#btn-share {
    width: 42px;
    height: 42px;
    animation: sharePulse 2s ease-in-out infinite;
}

/* 音乐和通知按钮 - 稍小 */
#btn-music,
#btn-notify {
    width: 30px;
    height: 30px;
}

/* ===== 签到按钮 - 精美发光效果 ===== */
#btn-checkin {
    width: 30px;
    height: 30px;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

/* 签到按钮背景光晕 */
#btn-checkin::before {
    content: '';
    position: absolute;
    inset: -4px;
    background: radial-gradient(circle at 50% 50%, rgba(251, 191, 36, 0.3), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

#btn-checkin:hover::before {
    opacity: 1;
}

/* 白光扫过效果 */
#btn-checkin::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
    transform: skewX(-25deg);
    animation: checkinShine 2.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes checkinShine {
    0% {
        left: -100%;
    }
    30% {
        left: 150%;
    }
    100% {
        left: 150%;
    }
}


/* ===== 签到弹窗 - 全新精美设计 ===== */

/* 遮罩层 - 毛玻璃效果 */
#checkin-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: opacity 0.3s ease;
}

#checkin-overlay.checkin-hidden {
    opacity: 0;
    pointer-events: none;
}

/* 主弹窗 - 渐变玻璃质感 */
#checkin-modal {
    width: 330px;
    max-width: 92vw;
    max-height: 82vh;
    background: linear-gradient(160deg, rgba(28, 30, 42, 0.97), rgba(18, 20, 30, 0.97));
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 28px;
    box-shadow: 
        0 24px 80px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 1px 0 rgba(255, 255, 255, 0.08) inset;
    overflow: hidden;
    animation: checkinSlideUp 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
}

@keyframes checkinSlideUp {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.92);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 顶部装饰渐变线 */
#checkin-modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #fbbf24, #f59e0b, #fbbf24, transparent);
    opacity: 0.6;
}

/* 头部 */
.checkin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.checkin-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 签到统计信息 */
.checkin-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.checkin-stats span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.checkin-stats .stat-value {
    color: #fbbf24;
    font-weight: 700;
    font-size: 13px;
}

#checkin-close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

#checkin-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    transform: rotate(90deg);
}

/* 主体 */
.checkin-body {
    padding: 18px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ===== 日历表 - 精致卡片风格 ===== */
#checkin-calendar {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    padding: 14px 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* 月份标题行 */
.checkin-calendar-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    position: relative;
}

.checkin-calendar-year-month {
    font-size: 16px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 1px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 星期行 */
.checkin-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    margin-bottom: 8px;
    padding: 0 2px;
}

.checkin-calendar-weekday {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.3);
    padding: 4px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 日期网格 */
.checkin-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    padding: 0 2px;
}

/* 日期格子 */
.checkin-calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    transition: all 0.2s ease;
    position: relative;
    cursor: default;
}

.checkin-calendar-day:not(.checkin-day-empty):not(.checkin-day-checked):hover {
    background: rgba(255, 255, 255, 0.06);
    transform: scale(1.05);
}

/* 已签到 - 完整填充 + 发光 */
.checkin-calendar-day.checkin-day-checked {
    background: linear-gradient(145deg, #10b981, #059669);
    color: #fff;
    font-weight: 700;
    border: none;
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: scale(1);
}

.checkin-calendar-day.checkin-day-checked:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.5);
}

/* 已签到 - 对勾标记 */
.checkin-calendar-day.checkin-day-checked::after {
    content: '✓';
    position: absolute;
    top: -1px;
    right: -1px;
    font-size: 7px;
    color: #6ee7b7;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    width: 13px;
    height: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* 今日 - 金色边框 + 光晕 */
.checkin-calendar-day.checkin-day-today {
    border: 2px solid rgba(251, 191, 36, 0.6);
    color: #fbbf24;
    font-weight: 700;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.15);
    background: rgba(251, 191, 36, 0.06);
}

/* 今日且已签到 - 特殊样式 */
.checkin-calendar-day.checkin-day-checked.checkin-day-today {
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 3px 12px rgba(16, 185, 129, 0.4), 0 0 20px rgba(251, 191, 36, 0.1);
}

/* 空白占位 */
.checkin-calendar-day.checkin-day-empty {
    background: transparent;
}

/* 补签标记 */
.checkin-calendar-day.checkin-day-makeup {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.2));
    color: #fbbf24;
    font-weight: 700;
    border: 1px solid rgba(251, 191, 36, 0.25);
}

.checkin-calendar-day.checkin-day-makeup::after {
    content: '↩';
    position: absolute;
    top: -1px;
    right: -1px;
    font-size: 7px;
    color: #fbbf24;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    width: 13px;
    height: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ===== 签到按钮区域 ===== */
.checkin-action {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 主按钮 - 渐变金色 */
.checkin-btn {
    width: 100%;
    padding: 15px 0;
    border: none;
    border-radius: 16px;
    background: linear-gradient(145deg, #fbbf24, #f59e0b);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 20px rgba(251, 191, 36, 0.35);
    outline: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    overflow: hidden;
}

/* 按钮点击波纹 */
.checkin-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.2), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.checkin-btn:hover::after {
    opacity: 1;
}

.checkin-btn:active {
    transform: scale(0.96);
    box-shadow: 0 2px 10px rgba(251, 191, 36, 0.2);
}

.checkin-btn:disabled {
    opacity: 0.5;
    transform: none;
    cursor: not-allowed;
    box-shadow: none;
}

.checkin-btn:disabled::after {
    display: none;
}

/* 今日已签到 - 灰色禁用态 */
.checkin-btn.checkin-btn-done {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    color: rgba(255, 255, 255, 0.4);
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* 补签按钮 - 半透明金色 */
.checkin-btn.checkin-btn-makeup {
    background: linear-gradient(145deg, rgba(251, 191, 36, 0.25), rgba(245, 158, 11, 0.2));
    font-size: 14px;
    box-shadow: 0 2px 12px rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.2);
    backdrop-filter: blur(4px);
}

.checkin-btn.checkin-btn-makeup:hover {
    background: linear-gradient(145deg, rgba(251, 191, 36, 0.35), rgba(245, 158, 11, 0.3));
    box-shadow: 0 3px 16px rgba(251, 191, 36, 0.25);
}

/* ===== 补签确认弹窗（在签到弹窗内部） ===== */
#makeup-confirm-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 28px;
    transition: opacity 0.25s ease;
}

#makeup-confirm-overlay.makeup-confirm-hidden {
    opacity: 0;
    pointer-events: none;
}

#makeup-confirm-modal {
    width: 260px;
    max-width: 85vw;
    background: linear-gradient(160deg, rgba(30, 32, 45, 0.98), rgba(20, 22, 35, 0.98));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
    animation: makeupConfirmPop 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes makeupConfirmPop {
    from {
        opacity: 0;
        transform: scale(0.85) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.makeup-confirm-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 18px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.makeup-confirm-icon {
    font-size: 18px;
}

.makeup-confirm-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}

.makeup-confirm-body {
    padding: 18px 20px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.makeup-confirm-icon-large {
    font-size: 36px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(251, 191, 36, 0.12);
    border-radius: 50%;
    border: 2px solid rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.makeup-confirm-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
    text-align: center;
    line-height: 1.5;
    margin: 0;
}

.makeup-confirm-cost {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(251, 191, 36, 0.08);
    border-radius: 10px;
    border: 1px solid rgba(251, 191, 36, 0.15);
    font-size: 15px;
    font-weight: 700;
    color: #fbbf24;
}

.makeup-confirm-amount {
    color: #ef4444;
}

.makeup-confirm-footer {
    display: flex;
    gap: 10px;
    padding: 10px 18px 18px;
}

.makeup-confirm-btn {
    flex: 1;
    padding: 12px 0;
    border: none;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.makeup-confirm-btn:active {
    transform: scale(0.95);
}

.makeup-confirm-cancel {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.makeup-confirm-cancel:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.makeup-confirm-ok {
    background: linear-gradient(145deg, #fbbf24, #f59e0b);
    color: #fff;
    box-shadow: 0 4px 16px rgba(251, 191, 36, 0.3);
}

.makeup-confirm-ok:hover {
    box-shadow: 0 6px 20px rgba(251, 191, 36, 0.4);
}

/* ===== 签到结果提示（居中弹出层） ===== */
.checkin-result {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #34d399;
    padding: 24px 36px;
    border-radius: 16px;
    background: rgba(16, 24, 40, 0.95);
    border: 1px solid rgba(52, 211, 153, 0.25);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    line-height: 1.6;
    max-width: 320px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: checkinResultPop 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes checkinResultPop {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.85);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.checkin-result.checkin-result-error {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.25);
    background: rgba(16, 24, 40, 0.95);
}


/* ===== 农场包裹层（可滑动） ===== */



#farm-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    touch-action: manipulation;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto;
    background: #000;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}




/* ===== 农场场景（包含背景和所有元素） ===== */
#farm-scene {
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
    transform-origin: 0 0;
    transform-style: preserve-3d;
    background: #000;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}


/* ===== 农场背景图片 ===== */
#farm-image {
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

/* ===== 土地图片（1~24） ===== */
.tudi-block {
    position: absolute;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: auto;
    cursor: pointer;
    transition: filter 0.15s ease;
    z-index: 0;
    transform: translate3d(0, 0, 0);
    outline: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

/* 点击反馈由 JS 中的 handleClick 控制，此处不设置 :active 样式 */
.tudi-block:active {
    /* 不设置任何样式，避免覆盖内联的 grayscale 效果 */
}

/* 灰色土地块点击抖动动画 */
@keyframes landShake {
    0% { transform: translateX(0); }
    15% { transform: translateX(-4px) rotate(-1deg); }
    30% { transform: translateX(4px) rotate(1deg); }
    45% { transform: translateX(-3px) rotate(-0.5deg); }
    60% { transform: translateX(3px) rotate(0.5deg); }
    75% { transform: translateX(-2px); }
    90% { transform: translateX(1px); }
    100% { transform: translateX(0); }
}

/* ===== 底部导航栏（悬空） ===== */

#bottom-nav {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 12px;
    padding: 4px 8px;
    padding-left: 12px;
    padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
    z-index: 100;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
}

.nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 0;
    border-radius: 0;
    transition: all 0.2s ease;
    width: 56px;
    pointer-events: auto;
    position: relative;
    overflow: visible;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

/* 按钮呼吸发光效果 - 使用 outline 避免与 filter 冲突 */
@keyframes navGlow {
    0%, 100% {
        outline: 2px solid rgba(255, 255, 255, 0.05);
        outline-offset: 2px;
    }
    50% {
        outline: 3px solid rgba(251, 191, 36, 0.25);
        outline-offset: 3px;
    }
}

/* 导航按钮专属浮动发光特效 */
@keyframes navFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

@keyframes navGlowPulse {
    0%, 100% {
        box-shadow: 
            0 0 8px rgba(251, 191, 36, 0.15),
            0 0 16px rgba(251, 191, 36, 0.08),
            0 0 32px rgba(251, 191, 36, 0.04);
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)) brightness(1);
    }
    50% {
        box-shadow: 
            0 0 12px rgba(251, 191, 36, 0.35),
            0 0 24px rgba(251, 191, 36, 0.2),
            0 0 48px rgba(251, 191, 36, 0.1);
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)) brightness(1.1);
    }
}

.nav-icon {
    width: 40px;
    height: 40px;
    display: block;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    transition: filter 0.2s ease;
    border-radius: 8px;
    animation: navGlow 3s ease-in-out infinite;
    animation-delay: calc(var(--btn-index, 0) * 0.6s);
}

/* 导航按钮（第一个按钮）专属浮动发光特效 - 大号 */
.nav-btn[data-action="nav-toggle"] .nav-icon {
    width: 60px;
    height: 60px;
    animation: 
        navGlow 3s ease-in-out infinite,
        navFloat 2.5s ease-in-out infinite,
        navGlowPulse 2.5s ease-in-out infinite;
    animation-delay: 
        calc(var(--btn-index, 0) * 0.6s),
        0s,
        0s;
    border-radius: 50%;
    position: relative;
    z-index: 1;
}

/* 导航按钮发光背景光晕 */
.nav-btn[data-action="nav-toggle"] {
    position: relative;
}

.nav-btn[data-action="nav-toggle"]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.12) 0%, transparent 70%);
    animation: navBgGlow 2.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes navBgGlow {
    0%, 100% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.5;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }
}

/* 点击反馈由 JS 控制 */

.nav-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.3px;
    opacity: 0.95;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    line-height: 1.2;
    margin-top: -2px;
}

/* ===== 导航飞入按钮（从导航按钮上方滑出） ===== */

#nav-flyout {
    position: fixed;
    z-index: 90;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    pointer-events: none;
    transition: opacity 0.25s ease;
    /* left/top/bottom 由 JS 动态计算设置 */
}

#nav-flyout.nav-flyout-hidden {
    opacity: 0;
    pointer-events: none;
}

.nav-flyout-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(20, 20, 28, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 8px 18px 8px 10px;
    cursor: pointer;
    pointer-events: auto;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    transform-origin: center bottom;
    opacity: 0;
    transform: translateY(20px) scale(0.8);
    animation: flyoutSlideUp 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: calc(var(--flyout-index, 0) * 0.08s);
}

#nav-flyout.nav-flyout-hidden .nav-flyout-btn {
    animation: none;
    opacity: 0;
    transform: translateY(10px) scale(0.8);
}

.nav-flyout-btn:active {
    transform: scale(0.92) !important;
    background: rgba(255, 255, 255, 0.12);
}

.nav-flyout-btn img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.nav-flyout-btn span {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
}

@keyframes flyoutSlideUp {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ===== 毛玻璃浮层容器 ===== */
#glass-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 5000;
    overflow: visible;
}

/* ===== 种子选择长条 ===== */
#seed-selector {
    position: fixed;
    z-index: 5001;
    background: rgba(10, 10, 18, 0.55);
    backdrop-filter: blur(40px) saturate(1.5);
    -webkit-backdrop-filter: blur(40px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    padding: 4px 0;
    min-width: 160px;
    max-width: 280px;
    opacity: 0;
    transform: translateX(-50%) translateY(6px) scale(0.95);
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: auto;
    overflow: hidden;
}

#seed-selector.active {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}

.seed-selector-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 10px 6px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    letter-spacing: 0.3px;
}

.seed-selector-close {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.4);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
}

.seed-selector-close:active {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    transform: scale(0.9);
}

.seed-selector-list-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 4px 8px 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.10) transparent;
}

.seed-selector-list-wrap::-webkit-scrollbar {
    height: 2px;
}

.seed-selector-list-wrap::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.10);
    border-radius: 2px;
}

.seed-selector-list-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.seed-selector-list {
    display: flex;
    gap: 6px;
    padding: 2px 0;
    min-width: max-content;
}

.seed-selector-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 8px 5px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 56px;
    max-width: 64px;
    flex-shrink: 0;
    position: relative;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.seed-selector-item:active {
    transform: scale(0.92);
    background: rgba(52, 211, 153, 0.12);
    border-color: rgba(52, 211, 153, 0.25);
}

.seed-selector-item-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    display: block;
    border-radius: 6px;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.seed-selector-item-name {
    font-size: 9px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    text-align: center;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.seed-selector-item-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    font-size: 8px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #34d399, #10b981);
    padding: 1px 4px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 1px 4px rgba(16, 185, 129, 0.25);
    line-height: 1.2;
}

/* ===== 种子提示（没有种子 / 播种成功） ===== */
.seed-selector-tip {
    position: fixed;
    z-index: 5001;
    background: rgba(20, 22, 30, 0.75);
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-50%) translateY(6px);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
}

.seed-selector-tip.active {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.seed-plant-success {
    background: rgba(16, 185, 129, 0.65);
    border-color: rgba(52, 211, 153, 0.4);
    color: #fff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 16px rgba(16, 185, 129, 0.12);
}

/* ===== 确认播种弹窗 ===== */
.seed-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: auto;
}

.seed-confirm-overlay.active {
    opacity: 1;
}

.seed-confirm-modal {
    width: 260px;
    max-width: 80vw;
    background: rgba(30, 30, 45, 0.50);
    backdrop-filter: blur(40px) saturate(1.5);
    -webkit-backdrop-filter: blur(40px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 20px 18px 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.seed-confirm-modal.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.seed-confirm-img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.seed-confirm-msg {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    line-height: 1.5;
    letter-spacing: 0.3px;
}

.seed-confirm-msg b {
    color: #34d399;
    font-weight: 700;
}

.seed-confirm-land {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    letter-spacing: 0.3px;
}

.seed-confirm-btns {
    display: flex;
    gap: 10px;
    width: 100%;
    margin-top: 4px;
}

.seed-confirm-btn {
    flex: 1;
    padding: 11px 0;
    border: none;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.3px;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.seed-confirm-cancel {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.seed-confirm-cancel:active {
    background: rgba(255, 255, 255, 0.12);
    transform: scale(0.97);
}

.seed-confirm-confirm {
    background: linear-gradient(135deg, #34d399, #10b981);
    color: #fff;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.seed-confirm-confirm:active {
    transform: scale(0.97);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

/* ===== 种子选择框 - 空状态 ===== */
.seed-selector-empty {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    gap: 6px;
}

.seed-selector-empty-icon {
    font-size: 18px;
    line-height: 1;
}

.seed-selector-empty-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    line-height: 1.3;
}

/* ===== 种子选择框 - 去商店按钮 ===== */
.seed-selector-shop-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    margin: 0 12px 10px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    letter-spacing: 0.3px;
}

.seed-selector-shop-btn:active {
    transform: scale(0.96);
    box-shadow: 0 1px 4px rgba(245, 158, 11, 0.15);
}

/* ===== 房子容器 ===== */
.house-container {
    transition: filter 0.2s ease, opacity 0.2s ease;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

.house-container:hover {
    filter: brightness(1.08) drop-shadow(0 4px 16px rgba(251, 191, 36, 0.25));
}

.house-container:active {
    filter: brightness(1.12) drop-shadow(0 4px 20px rgba(251, 191, 36, 0.4));
}

/* 房子图片 */
.house-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

/* 缩放手柄 - 默认隐藏（由 JS 控制显示），hover 放大 */
.house-resize-handle {
    transition: opacity 0.2s ease, transform 0.15s ease, background 0.15s ease;
}

.house-container.is-resizing .house-resize-handle {
    opacity: 1 !important;
}

/* 缩放手柄 hover 放大效果 */
.house-resize-handle:hover {
    transform: scale(1.3) !important;
    background: rgba(255, 255, 255, 1) !important;
    border-color: rgba(251, 191, 36, 1) !important;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.6), 0 0 20px rgba(251, 191, 36, 0.5) !important;
}

/* 信息面板 - 默认隐藏（由 JS 控制显示） */
.house-info-panel {
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    transition: opacity 0.25s ease;
}

.house-info-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.house-info-label {
    color: rgba(251, 191, 36, 0.9);
    font-weight: 700;
}

.house-info-value {
    color: #fff;
    font-weight: 600;
    margin-right: 6px;
}

.house-info-px {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 1px;
    padding-top: 1px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ===== 成熟阶段 zhua 装饰图片 ===== */
/* 浮动效果 + 强烈闪烁光圈 */

/* 浮动动画：上下浮动 */
@keyframes cropMatureFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* 强烈闪烁光圈动画 */
@keyframes cropMatureGlow {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 16px rgba(255, 215, 0, 0.6)) drop-shadow(0 0 32px rgba(255, 215, 0, 0.4));
        opacity: 1;
    }
    25% {
        filter: drop-shadow(0 0 16px rgba(255, 215, 0, 1)) drop-shadow(0 0 32px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 48px rgba(255, 215, 0, 0.6));
        opacity: 1;
    }
    50% {
        filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.6)) drop-shadow(0 0 12px rgba(255, 215, 0, 0.4)) drop-shadow(0 0 24px rgba(255, 215, 0, 0.2));
        opacity: 0.85;
    }
    75% {
        filter: drop-shadow(0 0 20px rgba(255, 215, 0, 1)) drop-shadow(0 0 40px rgba(255, 215, 0, 0.9)) drop-shadow(0 0 60px rgba(255, 215, 0, 0.7));
        opacity: 1;
    }
}

/* zhua 图片样式：浮动 + 强烈闪烁光圈 */
.crop-mature-zhua {
    animation: 
        cropMatureFloat 2s ease-in-out infinite,
        cropMatureGlow 0.8s ease-in-out infinite;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* ===== 农场装饰元素（其他） ===== */
.farm-decoration {
    transition: filter 0.2s ease, opacity 0.2s ease;
}

.farm-decoration:hover {
    filter: brightness(1.1) drop-shadow(0 0 8px rgba(251, 191, 36, 0.3));
}

.farm-decoration:active {
    filter: brightness(1.15) drop-shadow(0 0 12px rgba(251, 191, 36, 0.5));
}

/* ===== 作物信息面板（点击已种植土地块时显示） ===== */

/* 遮罩层 */
.crop-info-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: auto;
}

.crop-info-overlay.active {
    opacity: 1;
}

/* 弹窗主体 - 长方形设计，使用种子选择框背景风格 */
.crop-info-modal {
    width: 300px;
    max-width: 88vw;
    max-height: 85vh;
    background: rgba(10, 10, 18, 0.55);
    backdrop-filter: blur(40px) saturate(1.5);
    -webkit-backdrop-filter: blur(40px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    padding: 16px 18px 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.crop-info-modal.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* 标题行 */
.crop-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.crop-info-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.crop-info-close {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.4);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
}

.crop-info-close:active {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    transform: scale(0.9);
}

/* 顶部内容区：倒计时 + 图片 + 描述 水平排列 */
.crop-info-top {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 0;
}

/* 作物图片 */
.crop-info-img-container {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 6px;
}

.crop-info-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* 中间信息区（倒计时 + 描述） */
.crop-info-middle {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* 倒计时行 */
.crop-info-countdown-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.crop-info-countdown-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    letter-spacing: 0.2px;
}

.crop-info-countdown-time {
    font-size: 16px;
    font-weight: 700;
    color: #fbbf24;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.2);
}

/* 种子描述 */
.crop-info-desc-section {
    width: 100%;
}

.crop-info-desc-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 2px;
    letter-spacing: 0.2px;
}

.crop-info-desc-text {
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.4;
    letter-spacing: 0.1px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 底部进度条区域 */
.crop-info-progress-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.crop-info-progress-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.2px;
}

.crop-info-progress-bar-bg {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.crop-info-progress-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #34d399, #10b981);
    box-shadow: 0 0 6px rgba(52, 211, 153, 0.3);
    transition: width 0.5s ease;
    position: relative;
    width: 0%;
}

.crop-info-progress-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, transparent 100%);
    border-radius: 4px 4px 0 0;
}

.crop-info-progress-text {
    font-size: 12px;
    font-weight: 700;
    color: #34d399;
    text-align: right;
    letter-spacing: 0.2px;
}

/* ===== 收获飞行动画 ===== */

/* 飞行的种子元素 */
.harvest-fly-seed {
    z-index: 9999;
    pointer-events: none;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.8), 0 0 40px rgba(251, 191, 36, 0.4);
    transition: none !important;
}

/* ===== 收获结果提示框 ===== */

/* 提示框遮罩/容器 */
.harvest-result-tip {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.harvest-result-tip.harvest-tip-show {
    opacity: 1;
}

.harvest-result-tip.harvest-tip-hide {
    opacity: 0;
}

/* 提示框内容（iOS 玻璃透明效果） */
.harvest-tip-content {
    background: rgba(30, 30, 45, 0.45);
    backdrop-filter: blur(40px) saturate(1.5);
    -webkit-backdrop-filter: blur(40px) saturate(1.5);
    border: 1px solid rgba(251, 191, 36, 0.15);
    border-radius: 24px;
    padding: 28px 32px 24px;
    max-width: 320px;
    width: 85%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: scale(0.85) translateY(20px);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.harvest-tip-show .harvest-tip-content {
    transform: scale(1) translateY(0);
}

.harvest-tip-hide .harvest-tip-content {
    transform: scale(0.85) translateY(20px);
}

/* 标题 */
.harvest-tip-title {
    font-size: 22px;
    font-weight: 800;
    color: #fbbf24;
    margin-bottom: 16px;
    text-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
    letter-spacing: 1px;
}

/* ===== 收获摘要卡片（数量 + 经验 双列布局） ===== */
.harvest-tip-summary {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    padding: 0 4px;
}

.harvest-tip-stat {
    flex: 1;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    border-radius: 14px;
    padding: 14px 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.harvest-tip-stat-exp {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.12));
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.harvest-tip-stat-value {
    font-size: 26px;
    font-weight: 900;
    color: #fbbf24;
    text-shadow: 0 0 20px rgba(251, 191, 36, 0.4);
    line-height: 1.2;
}

.harvest-tip-stat-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.5px;
}

/* 详情列表 */
.harvest-details {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 16px;
    padding: 0 4px;
}

.harvest-details::-webkit-scrollbar {
    width: 3px;
}

.harvest-details::-webkit-scrollbar-track {
    background: transparent;
}

.harvest-details::-webkit-scrollbar-thumb {
    background: rgba(251, 191, 36, 0.3);
    border-radius: 2px;
}

.harvest-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    margin-bottom: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.2s ease;
}

.harvest-detail-item:last-child {
    margin-bottom: 0;
}

.harvest-detail-name {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.harvest-detail-qty {
    font-size: 16px;
    font-weight: 700;
    color: #fbbf24;
}

.harvest-detail-exp {
    font-size: 12px;
    font-weight: 600;
    color: #fbbf24;
    margin-left: 8px;
    padding: 2px 8px;
    background: rgba(251, 191, 36, 0.15);
    border-radius: 6px;
}

.harvest-detail-exp b {
    font-size: 14px;
    font-weight: 800;
}

/* 确定按钮 */
.harvest-tip-btn {
    display: inline-block;
    padding: 12px 44px;
    font-size: 16px;
    font-weight: 700;
    color: #1a1a2e;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3);
    letter-spacing: 0.5px;
}

.harvest-tip-btn:active {
    transform: scale(0.95);
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.2);
}

/* ===== 铲土动画元素 ===== */
.crop-spade-chantu {
    pointer-events: none;
    object-fit: contain;
    animation: spadeFloat 0.3s ease-in-out infinite alternate;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    will-change: transform;
}

@keyframes spadeFloat {
    0% {
        transform: translateX(-50%) translateY(0) scale(1);
    }
    100% {
        transform: translateX(-50%) translateY(-8px) scale(1.05);
    }
}

/* ===== 铲土提示框（iOS 玻璃透明效果） ===== */
.spade-result-tip {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.spade-result-tip.spade-tip-show {
    opacity: 1;
}

.spade-result-tip.spade-tip-hide {
    opacity: 0;
}

.spade-tip-content {
    padding: 28px 32px 24px;
    border-radius: 24px;
    text-align: center;
    color: #fff;
    background: rgba(30, 30, 45, 0.45);
    backdrop-filter: blur(40px) saturate(1.5);
    -webkit-backdrop-filter: blur(40px) saturate(1.5);
    border: 1px solid rgba(52, 211, 153, 0.2);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: scale(0.9);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    max-width: 300px;
    width: 85%;
}

.spade-tip-show .spade-tip-content {
    transform: scale(1);
}

.spade-tip-hide .spade-tip-content {
    transform: scale(0.9);
}

.spade-tip-icon {
    font-size: 52px;
    margin-bottom: 10px;
    line-height: 1;
    filter: drop-shadow(0 4px 8px rgba(52, 211, 153, 0.3));
    display: flex;
    align-items: center;
    justify-content: center;
}

.spade-tip-icon-img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    filter: drop-shadow(0 2px 6px rgba(52, 211, 153, 0.4));
}

.spade-tip-message {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
    line-height: 1.5;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* 铲土清理数量显示 */
.spade-tip-count {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 14px;
    padding: 6px 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    letter-spacing: 0.3px;
}

.spade-tip-count-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    user-select: none;
    -webkit-user-drag: none;
}

/* 铲土经验值显示 - 卡片式 */
.spade-tip-exp {
    font-size: 15px;
    color: #fbbf24;
    margin-bottom: 18px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.12));
    border-radius: 14px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(251, 191, 36, 0.3);
    font-weight: 700;
    letter-spacing: 0.5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.spade-tip-exp-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.5px;
}

.spade-tip-exp b {
    color: #fbbf24;
    font-size: 28px;
    font-weight: 900;
    text-shadow: 0 0 20px rgba(251, 191, 36, 0.5);
    line-height: 1.3;
}

.spade-tip-btn {
    display: inline-block;
    padding: 12px 48px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #34d399, #10b981);
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 15px rgba(52, 211, 153, 0.3);
    letter-spacing: 0.5px;
}

.spade-tip-btn:active {
    transform: scale(0.95);
    box-shadow: 0 2px 8px rgba(52, 211, 153, 0.2);
}

/* ===== 虫子动画样式 ===== */
.crop-bug-anim {
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    image-rendering: auto;
    will-change: transform;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* ===== USDT 收款账户展示（充值弹窗） ===== */

/* 整个 USDT 页面容器 */
.recharge-usdt-page {
    padding: 8px 4px;
    animation: rechargeUsdtFadeIn 0.4s ease;
}

/* 页面标题 */
.recharge-usdt-page-title {
    font-size: 17px;
    font-weight: 700;
    color: #34d399;
    margin-bottom: 14px;
    text-align: center;
    letter-spacing: 0.5px;
    text-shadow: 0 0 12px rgba(52, 211, 153, 0.3);
}

/* 订单信息栏 */
.recharge-usdt-order-info {
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 16px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    line-height: 1.6;
}

.recharge-usdt-order-id {
    color: #fbbf24;
    font-weight: 600;
    font-size: 11px;
    font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
}

.recharge-usdt-order-amount {
    color: #34d399;
    font-weight: 700;
}

@keyframes rechargeUsdtFadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 账户列表容器 - 美化版 */
.recharge-usdt-accounts {
    margin-top: 12px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.08), rgba(16, 185, 129, 0.04));
    border-radius: 16px;
    border: 1px solid rgba(52, 211, 153, 0.2);
    box-shadow: 0 0 20px rgba(52, 211, 153, 0.05), inset 0 1px 0 rgba(52, 211, 153, 0.1);
}

.recharge-usdt-accounts-title {
    font-size: 15px;
    font-weight: 700;
    color: #34d399;
    margin-bottom: 14px;
    text-align: center;
    letter-spacing: 0.5px;
    text-shadow: 0 0 12px rgba(52, 211, 153, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.recharge-usdt-accounts-title::before,
.recharge-usdt-accounts-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(52, 211, 153, 0.3), transparent);
    max-width: 40px;
}

/* 单个账户项 - 美化版 */
.recharge-usdt-account-item {
    padding: 14px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 12px;
    transition: border-color 0.2s ease;
}

.recharge-usdt-account-item:last-child {
    margin-bottom: 0;
}

.recharge-usdt-account-item:hover {
    border-color: rgba(52, 211, 153, 0.2);
}

/* 账户名称 - 美化版 */
.recharge-usdt-account-name {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
    text-align: center;
    letter-spacing: 0.3px;
}

/* 地址标签 - 单独一行 */
.recharge-usdt-address-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 6px;
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* 地址值容器 - 可点击复制，美化版 */
.recharge-usdt-address-value {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    min-width: 0;
}

.recharge-usdt-address-value:active {
    background: rgba(52, 211, 153, 0.1);
    border-color: rgba(52, 211, 153, 0.4);
}

/* 地址文本 - 单独占一行，美化版 */
.recharge-usdt-address-text {
    flex: 1;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
    word-break: break-all;
    line-height: 1.5;
    user-select: all;
    -webkit-user-select: all;
    letter-spacing: 0.2px;
}

/* 复制按钮 - 美化版 */
.recharge-usdt-copy-btn {
    flex-shrink: 0;
    font-size: 11px;
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid rgba(52, 211, 153, 0.25);
    background: rgba(52, 211, 153, 0.1);
    color: #34d399;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.recharge-usdt-copy-btn:active {
    transform: scale(0.95);
    background: rgba(52, 211, 153, 0.2);
    border-color: #34d399;
    box-shadow: 0 0 12px rgba(52, 211, 153, 0.2);
}

/* 二维码容器 - 美化版 */
.recharge-usdt-qrcode {
    display: flex;
    justify-content: center;
    margin: 12px 0 8px;
}

.recharge-usdt-qrcode-img {
    width: 130px;
    height: 130px;
    object-fit: contain;
    border-radius: 12px;
    background: #fff;
    padding: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 20px rgba(52, 211, 153, 0.1);
    transition: transform 0.2s ease;
}

.recharge-usdt-qrcode-img:active {
    transform: scale(0.95);
}

/* 金额显示 - 在二维码和地址之间 */
.recharge-usdt-amount-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 12px 0 14px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.12), rgba(16, 185, 129, 0.06));
    border-radius: 12px;
    border: 1px solid rgba(52, 211, 153, 0.2);
}

.recharge-usdt-amount-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    letter-spacing: 0.5px;
}

.recharge-usdt-amount-value {
    font-size: 22px;
    font-weight: 800;
    color: #34d399;
    text-shadow: 0 0 20px rgba(52, 211, 153, 0.3);
    letter-spacing: 0.5px;
}

/* 底部提醒文字 */
.recharge-usdt-reminder {
    margin-top: 16px;
    padding: 10px 14px;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 10px;
    font-size: 12px;
    color: #fbbf24;
    text-align: center;
    line-height: 1.6;
    font-weight: 500;
}

/* 备注 - 美化版 */
.recharge-usdt-remark {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    margin-top: 8px;
    line-height: 1.5;
    font-style: italic;
}

/* USDT 空状态 */
.recharge-usdt-empty {
    text-align: center;
    padding: 20px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
}

/* ===== VND 银行转账页面 ===== */
.recharge-bank-page {
    padding: 8px 4px;
}

.recharge-bank-page-title {
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 6px;
    color: #fff;
}

.recharge-bank-order-info {
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 16px;
}

.recharge-bank-order-id {
    color: #fbbf24;
    cursor: pointer;
    border-bottom: 1px dashed rgba(251, 191, 36, 0.3);
}

.recharge-bank-amount {
    text-align: center;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 18px;
}

.recharge-bank-amount-value {
    color: #fbbf24;
    font-size: 20px;
    font-weight: 700;
}

/* 二维码容器 */
.recharge-bank-qrcode {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

.recharge-bank-qrcode-img {
    width: 140px;
    height: 140px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* 账户信息卡片 */
.recharge-bank-info-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 4px 0;
    margin-bottom: 16px;
}

.recharge-bank-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: background 0.2s ease;
    position: relative;
}

.recharge-bank-info-row:last-child {
    border-bottom: none;
}

.recharge-bank-info-row:active {
    background: rgba(251, 191, 36, 0.06);
}

.recharge-bank-info-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
}

.recharge-bank-info-value {
    font-size: 14px;
    color: #fbbf24;
    font-weight: 600;
    text-align: right;
    word-break: break-all;
    max-width: 65%;
}

.recharge-bank-copy-hint {
    font-size: 10px;
    color: rgba(251, 191, 36, 0.4);
    margin-left: 6px;
    flex-shrink: 0;
}

/* 备注 */
.recharge-bank-remark {
    margin-top: 0;
    margin-bottom: 16px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
    line-height: 1.5;
}

/* 超时提示 */
.recharge-bank-timeout {
    margin-top: 0;
    margin-bottom: 4px;
    padding: 12px 14px;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.15);
    border-radius: 12px;
    font-size: 12px;
    color: #fbbf24;
    text-align: center;
    line-height: 1.7;
}

/* 复制成功提示浮层 */
.recharge-copy-tip {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(52, 211, 153, 0.9);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    animation: rechargeCopyTipFade 1.5s ease forwards;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

@keyframes rechargeCopyTipFade {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(4px);
    }
    15% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    85% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-4px);
    }
}

/* 充值提示（错误/信息） */
.recharge-tip {
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    animation: rechargeTipSlide 0.3s ease;
}

.recharge-tip.recharge-tip-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.recharge-tip.recharge-tip-success {
    background: rgba(52, 211, 153, 0.15);
    border: 1px solid rgba(52, 211, 153, 0.3);
    color: #6ee7b7;
}

@keyframes rechargeTipSlide {
    0% {
        opacity: 0;
        transform: translateY(-6px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== 理财弹窗（iOS 毛玻璃风格） ===== */
#finance-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity 0.3s ease;
}

#finance-overlay.finance-hidden {
    display: none;
}

#finance-modal {
    width: 88%;
    max-width: 380px;
    max-height: 80vh;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    padding: 24px 20px 20px;
    position: relative;
    animation: financeFadeIn 0.35s ease-out;
}

@keyframes financeFadeIn {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

#finance-modal::-webkit-scrollbar {
    width: 4px;
}

#finance-modal::-webkit-scrollbar-track {
    background: transparent;
}

#finance-modal::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

#finance-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 22px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
    line-height: 1;
    padding: 0;
}

#finance-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.1);
}

#finance-close:active {
    transform: scale(0.95);
}

.finance-header {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.finance-header-icon {
    font-size: 36px;
    margin-bottom: 8px;
}

.finance-title {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.5px;
}

.finance-subtitle {
    display: block;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 4px;
    font-weight: 400;
}

.finance-body {
    padding: 0 2px;
}

.finance-loading {
    text-align: center;
    padding: 30px 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

/* 理财方案卡片 */
.finance-plan-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 16px 18px;
    margin-bottom: 14px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.finance-plan-card:last-child {
    margin-bottom: 0;
}

.finance-plan-card:active {
    transform: scale(0.98);
}

.finance-plan-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.finance-plan-name {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.finance-plan-badge {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 165, 0, 0.3));
    border: 1px solid rgba(255, 215, 0, 0.3);
    color: #ffd700;
    font-weight: 600;
}

.finance-plan-details {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.finance-plan-detail-item {
    flex: 1;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 8px 4px;
}

.finance-plan-detail-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    display: block;
    margin-bottom: 3px;
}

.finance-plan-detail-value {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.finance-plan-detail-value.gold {
    color: #ffd700;
}

.finance-plan-detail-value.highlight {
    color: #4cd964;
}

.finance-plan-tags {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.finance-plan-tag {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
}

.finance-plan-tag.active {
    background: rgba(76, 217, 100, 0.15);
    border-color: rgba(76, 217, 100, 0.3);
    color: #4cd964;
}

.finance-plan-footer {
    margin-top: 14px;
    padding: 0;
    text-align: center;
}

.finance-plan-desc {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    flex: 1;
    line-height: 1.4;
    padding-right: 10px;
}

.finance-plan-join-btn {
    display: inline-block;
    width: 100%;
    max-width: 320px;
    background: linear-gradient(180deg, #fcd34d 0%, #fbbf24 20%, #f59e0b 60%, #d97706 100%);
    border: none;
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    padding: 16px 20px;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
    letter-spacing: 1.5px;
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.1),
        0 8px 24px rgba(251, 191, 36, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 0 rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    user-select: none;
    -webkit-user-select: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

/* 顶部高光线 - 立体感 */
.finance-plan-join-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.05) 100%);
    border-radius: 16px 16px 0 0;
    pointer-events: none;
}

/* 白光快速划过动画 */
.finance-plan-join-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: skewX(-20deg);
    animation: joinBtnShine 2.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes joinBtnShine {
    0% {
        left: -100%;
    }
    30% {
        left: 150%;
    }
    100% {
        left: 150%;
    }
}

.finance-plan-join-btn:hover {
    background: linear-gradient(180deg, #fde68a 0%, #fcd34d 20%, #fbbf24 60%, #f59e0b 100%);
    transform: translateY(-3px);
    box-shadow:
        0 6px 10px rgba(0, 0, 0, 0.12),
        0 12px 32px rgba(251, 191, 36, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -2px 0 rgba(0, 0, 0, 0.1);
}

.finance-plan-join-btn:active {
    background: linear-gradient(180deg, #d97706 0%, #b45309 100%);
    transform: translateY(0);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.1),
        0 4px 12px rgba(251, 191, 36, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

/* ===== 理财标签按钮 ===== */
.finance-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    padding: 0 2px;
}

.finance-tab-btn {
    flex: 1;
    padding: 10px 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
    letter-spacing: 0.5px;
}

.finance-tab-btn.active {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.2));
    border-color: rgba(255, 215, 0, 0.4);
    color: #ffd700;
    box-shadow: 0 2px 12px rgba(255, 215, 0, 0.15);
}

.finance-tab-btn:active {
    transform: scale(0.96);
}

.finance-tab-content {
    min-height: 100px;
}

/* ===== 理财进度卡片 ===== */
.finance-progress-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 16px 18px;
    margin-bottom: 14px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.finance-progress-card:last-child {
    margin-bottom: 0;
}

.finance-progress-card:active {
    transform: scale(0.98);
}

.finance-progress-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.finance-progress-plan-name {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.finance-progress-status {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 600;
    white-space: nowrap;
}

.finance-progress-status.status-ongoing {
    background: rgba(76, 217, 100, 0.15);
    border: 1px solid rgba(76, 217, 100, 0.3);
    color: #4cd964;
}

.finance-progress-status.status-settled {
    background: rgba(90, 200, 250, 0.15);
    border: 1px solid rgba(90, 200, 250, 0.3);
    color: #5ac8fa;
}

.finance-progress-status.status-cancelled {
    background: rgba(255, 69, 58, 0.15);
    border: 1px solid rgba(255, 69, 58, 0.3);
    color: #ff453a;
}

/* 进度条 */
.finance-progress-bar-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.finance-progress-bar-bg {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.finance-progress-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
    position: relative;
}

.finance-progress-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: progressShimmer 2s infinite;
}

@keyframes progressShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.finance-progress-bar-text {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    min-width: 36px;
    text-align: right;
}

/* 进度详情 */
.finance-progress-details {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.finance-progress-detail-item {
    flex: 1;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 8px 4px;
}

.finance-progress-detail-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.45);
    display: block;
    margin-bottom: 3px;
}

.finance-progress-detail-value {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.finance-progress-detail-value.gold {
    color: #ffd700;
}

.finance-progress-detail-value.profit {
    color: #4cd964;
}

/* 进度底部 */
.finance-progress-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.finance-progress-footer-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.finance-progress-footer-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.finance-progress-footer-item {
    flex: 1;
    text-align: center;
}

.finance-progress-footer-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    display: block;
    margin-bottom: 2px;
}

.finance-progress-footer-value {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

/* 倒计时文本 */
.finance-countdown-text {
    font-size: 13px;
    font-weight: 600;
    color: #fbbf24;
}

.finance-countdown-text.expired {
    color: #34d399;
}

/* 空状态 */
.finance-empty-progress {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    line-height: 1.8;
    white-space: pre-line;
}

/* 取款按钮 */
.finance-withdraw-btn-wrap {
    margin-top: 12px;
    text-align: center;
}

.finance-withdraw-btn {
    display: inline-block;
    padding: 8px 24px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    user-select: none;
    -webkit-user-select: none;
}

.finance-withdraw-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.finance-withdraw-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
}

.finance-withdraw-btn.settled {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    box-shadow: 0 4px 15px rgba(245, 87, 108, 0.3);
}

.finance-withdraw-btn.settled:hover {
    box-shadow: 0 6px 20px rgba(245, 87, 108, 0.4);
}

/* ===== 小狗动画 ===== */

#dog-animation {
    position: absolute;
    width: 8%;
    height: auto;
    left: 67%;
    top: 52%;
    z-index: 10;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    object-fit: contain;
}