/* css/social-modals.css */

        .marquee-box { background-color: #E1E8ED; border-radius: 10px; padding: 10px 12px; margin-top: 15px; overflow: hidden; white-space: nowrap; font-size: 12px; color: var(--text-main); font-weight: 500; }
        .marquee-content { display: inline-block; animation: scrollMarquee 40s linear infinite; }
        .marquee-item { display: inline-block; margin-right: 40px; }
        .marquee-item span { color: var(--danger); font-weight: bold; }
        @keyframes scrollMarquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
        /* 非首页暂停跑马灯，减 GPU 占用 */
        body:not(.tab-home) .marquee-content { animation-play-state: paused; }
        @media (prefers-reduced-motion: reduce) {
            .marquee-content { animation: none; }
        }
        
        .comment-scroll-box { max-height: 250px; overflow-y: scroll; display: flex; flex-direction: column; gap: 10px; font-size: 12px; padding-right: 5px; -webkit-overflow-scrolling: touch; }
        .leaderboard-list { font-size: 13px; }
        .leaderboard-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px dashed #E1E8ED; }
        .leaderboard-item:last-child { border-bottom: none; }
        .leaderboard-rank { width: 28px; font-weight: 900; color: var(--accent); display: inline-block; }
        .leaderboard-count { color: var(--primary); font-weight: bold; }
        .comment-item { border-bottom: 1px solid #E1E8ED; padding-bottom: 8px; text-align: left; }
        .comment-user { font-weight: bold; color: var(--accent); margin-bottom: 2px; display: flex; justify-content: space-between; }
        .comment-time { color: var(--text-muted); font-size: 11px; font-weight: normal; }
        
        .modal-mask { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.65); z-index: 1000; align-items: center; justify-content: center; padding: 20px; }
        .modal-box { background: #FFF; border-radius: 16px; padding: 24px 20px; max-width: 380px; width: 100%; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,0.2); max-height: 90vh; overflow-y: auto; }
        .modal-title { font-size: 17px; font-weight: 900; color: var(--text-main); margin-bottom: 12px; }
        .modal-money { font-size: 32px; font-weight: 900; color: var(--secondary); font-family: "Impact", sans-serif; margin: 8px 0 16px; }
        .modal-desc { font-size: 12px; color: var(--text-muted); line-height: 1.6; text-align: left; margin-bottom: 16px; }
        .secret-code-box { background: #F8F9FA; border: 2px dashed var(--accent); border-radius: 10px; padding: 14px 10px; font-family: monospace; font-size: 13px; font-weight: bold; color: var(--accent); word-break: break-all; cursor: pointer; margin-bottom: 10px; }
        .secret-timer { font-size: 12px; color: var(--danger); font-weight: bold; margin-bottom: 14px; }
        .secret-timer span { font-family: monospace; font-size: 14px; }
        .cs-step-card { background: rgba(0, 113, 255, 0.05); border: 1px solid rgba(0, 113, 255, 0.15); border-radius: 10px; padding: 14px; text-align: left; margin-bottom: 14px; }
        .cs-step-card .step-num { display: inline-block; background: var(--accent); color: #FFF; width: 20px; height: 20px; border-radius: 50%; text-align: center; line-height: 20px; font-size: 11px; font-weight: bold; margin-right: 6px; }
        .cs-step-card p { font-size: 12px; color: var(--text-main); line-height: 1.6; margin-bottom: 8px; }
        .cs-step-card p:last-child { margin-bottom: 0; }
        .modal-action-btn { width: 100%; border: none; padding: 14px; border-radius: 10px; font-size: 14px; font-weight: bold; cursor: pointer; margin-bottom: 8px; }
        .modal-action-btn.primary { background: var(--accent); color: #FFF; }
        .modal-action-btn.gold { background: var(--gold-btn); color: #3E2723; }
        .modal-action-btn.secondary { background: #F0F0F0; color: var(--text-muted); }
        .modal-action-btn.success { background: var(--primary); color: #FFF; }
        .modal-close-btn { width: 100%; background: #F0F0F0; color: var(--text-muted); border: none; padding: 12px; border-radius: 10px; font-size: 13px; cursor: pointer; }
        .block-icon { font-size: 48px; margin-bottom: 10px; }
        .progress-bar-wrap { background: #E1E8ED; border-radius: 8px; height: 10px; margin: 12px 0; overflow: hidden; }
        .progress-bar-fill { background: linear-gradient(90deg, var(--primary), var(--secondary)); height: 100%; border-radius: 8px; transition: width 0.5s; }