/* KK Dating - Main Stylesheet */ /* ============================================= CUPIDIC DARK LUXURY — FULL LAYOUT + THEME OVERHAUL ============================================= */ /* ---------- ROOT VARIABLES ---------- */ :root { --kkdating-bg: #07070d; --kkdating-card: rgba(14, 14, 24, .97); --kkdating-card-strong: #12121e; --kkdating-primary: #a78bfa; --kkdating-primary-soft: rgba(167, 139, 250, .1); --kkdating-accent: #c4b5fd; --kkdating-accent-soft: rgba(196, 181, 253, .08); --kkdating-text: #eeeef3; --kkdating-muted: #7e7e90; --kkdating-subtle: #4e4e60; --kkdating-border: #1f1f30; --kkdating-border-soft: rgba(31, 31, 48, .6); --kkdating-gradient-primary: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%); --kkdating-gradient-cool: linear-gradient(135deg, #67e8f9 0%, #22d3ee 100%); --kkdating-gradient-warm: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); --kkdating-gradient-pink: linear-gradient(135deg, #f472b6 0%, #ec4899 100%); --kkdating-gradient-mint: linear-gradient(135deg, #34d399 0%, #10b981 100%); --kkdating-shadow-sm: 0 2px 6px rgba(0, 0, 0, .5); --kkdating-shadow-md: 0 8px 24px rgba(0, 0, 0, .6); --kkdating-shadow-lg: 0 20px 50px rgba(0, 0, 0, .7); --kkdating-shadow-glow: 0 14px 40px rgba(124, 58, 237, .2); --kkdating-shadow: var(--kkdating-shadow-md); --van-text-color: #eeeef3; --van-text-color-2: #7e7e90; --van-text-color-3: #4e4e60; --van-border-color: #1f1f30; --van-background: #07070d; --van-background-2: #12121e; --van-background-3: #1a1a2c; --van-active-color: #1f1f30; } /* ---------- GLOBAL ---------- */ html, body { background: #07070d !important; color: #eeeef3; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } #app { background: transparent; } ::selection { background: #a78bfa; color: #14141f; } ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: #07070d; } ::-webkit-scrollbar-thumb { background: #1f1f30; border-radius: 3px; } /* ============================================================ AUTH PAGES — collage bg, glass card, luxury ============================================================ */ .auth-mobile:before, .auth-mobile::before, .mobile-shell.auth-mobile:before, .mobile-shell.auth-mobile::before { background: var(--kkdating-auth-bg-collage) center center / cover no-repeat, linear-gradient(180deg, rgba(7,7,13,.65), rgba(7,7,13,.8) 48%, rgba(7,7,13,.92)) !important; } .auth-mobile:after, .auth-mobile::after, .mobile-shell.auth-mobile:after, .mobile-shell.auth-mobile::after { background: linear-gradient(180deg, rgba(124,58,237,.04), rgba(0,0,0,.3)) !important; } /* ---- LOGIN ---- */ .login-mobile { min-height: 100vh; min-height: 100dvh; display: flex !important; flex-direction: column !important; align-items: flex-end !important; justify-content: center !important; padding: 32px 24px 32px 20px !important; gap: 0 !important; position: relative; overflow: visible !important; } /* Language selector — HIDDEN in footer, replaced by injected dropdown */ .login-mobile .login-footer .footer-row:first-child, .register-mobile .register-footer .footer-row:first-child, .forgot-mobile .forgot-footer .footer-row:first-child { display: none !important; } /* Injected language dropdown wrapper — top-right */ .lang-dropdown-wrapper { position: fixed; top: 16px; right: 16px; z-index: 9999; } .lang-dropdown-btn { background: rgba(14, 14, 24, .85) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(167, 139, 250, .25) !important; color: #c4b5fd !important; padding: 8px 16px !important; border-radius: 20px !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important; display: flex !important; align-items: center !important; gap: 6px !important; transition: all .2s; font-family: 'Inter', -apple-system, sans-serif; } .lang-dropdown-btn:hover { border-color: rgba(167, 139, 250, .4) !important; background: rgba(14, 14, 24, .95) !important; } .lang-dropdown-btn::after { content: ''; display: inline-block !important; width: 0 !important; height: 0 !important; border-left: 4px solid transparent !important; border-right: 4px solid transparent !important; border-top: 5px solid #7e7e90 !important; margin-left: 4px; transition: border-top-color .2s; } .lang-dropdown-wrapper.open .lang-dropdown-btn::after { border-top-color: #a78bfa !important; } .lang-dropdown-menu { position: absolute; top: calc(100% + 4px); right: 0; background: rgba(14, 14, 24, .97) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(167, 139, 250, .2) !important; border-radius: 12px !important; padding: 4px 0 !important; min-width: 140px; display: none; box-shadow: 0 12px 40px rgba(0, 0, 0, .6) !important; } .lang-dropdown-wrapper.open .lang-dropdown-menu { display: block; } .lang-dropdown-item { padding: 10px 16px !important; color: #7e7e90 !important; cursor: pointer !important; font-size: 14px !important; transition: all .15s; white-space: nowrap; } .lang-dropdown-item:hover { background: rgba(167, 139, 250, .1) !important; color: #c4b5fd !important; } .lang-dropdown-item.active { color: #a78bfa !important; font-weight: 700 !important; } /* Login hero: SHOW on all screens, hide 1:1 logo */ .login-hero { display: flex !important; flex-direction: column !important; align-items: flex-end !important; justify-content: center !important; padding: 0 24px 8px 20px !important; width: 100% !important; max-width: 420px !important; margin-right: 0 !important; position: relative; z-index: 1; } .login-logo { display: none !important; } .login-hero h1 { font-family: 'Playfair Display', Georgia, serif !important; font-size: 28px !important; font-weight: 900 !important; color: #eeeef3 !important; letter-spacing: .02em !important; text-align: right !important; line-height: 1.2 !important; margin-bottom: 4px !important; } .login-hero p { color: #7e7e90 !important; font-size: 13px !important; text-align: right !important; font-weight: 500 !important; letter-spacing: .01em; } .auth-mobile .login-card.glass-card { background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; } .login-card { width: 100%; max-width: 420px; padding: 0 24px 0 20px !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; position: relative; z-index: 1; display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 0 !important; } .login-card h2, .login-card-head h2 { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; font-family: 'Playfair Display', Georgia, serif !important; font-size: 24px !important; font-weight: 900; letter-spacing: .02em; text-align: right; margin-bottom: 16px !important; } /* Login form fields: individual cards, no border-bottom list */ [data-v-c9058dbc] .van-cell { background: rgba(14, 14, 24, .6) !important; border: none !important; border-radius: 14px !important; margin-bottom: 6px !important; padding: 14px 16px !important; transition: background .2s; } [data-v-c9058dbc] .van-cell:focus-within { background: rgba(26, 26, 44, .8) !important; } [data-v-c9058dbc] .van-field__label { color: #7e7e90 !important; font-size: 11px !important; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; } [data-v-c9058dbc] .van-field__control { color: #eeeef3 !important; font-size: 15px; } [data-v-c9058dbc] .van-field__control::placeholder { color: #3a3a50 !important; } .login-submit { margin-top: 24px !important; } .login-submit .van-button { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; border: none !important; border-radius: 16px !important; height: 52px !important; box-shadow: 0 12px 36px rgba(124, 58, 237, .3) !important; font-weight: 700 !important; font-size: 15px !important; letter-spacing: .04em; } .login-links { color: #7e7e90 !important; margin-top: 16px !important; gap: 20px !important; font-size: 13px !important; justify-content: flex-end !important; } .login-links a { color: #a78bfa !important; font-weight: 600; transition: color .2s; } .login-links a:hover { color: #c4b5fd !important; } .login-split { display: none !important; } /* Footer — right-aligned under login form */ .login-footer, .register-footer, .forgot-footer { position: relative; z-index: 1; margin-top: 24px !important; padding: 0 24px 0 20px !important; background: transparent !important; border: none !important; max-width: 420px; width: 100%; } /* Links row — right-aligned text style on ALL auth pages */ .login-mobile .login-footer .footer-row:nth-child(2), .register-mobile .register-footer .footer-row:nth-child(2), .forgot-mobile .forgot-footer .footer-row:nth-child(2) { display: flex !important; justify-content: flex-end !important; gap: 14px !important; flex-wrap: wrap; margin: 0 !important; padding: 0 !important; } .login-mobile .login-footer .footer-row:nth-child(2) .footer-separator, .register-mobile .register-footer .footer-row:nth-child(2) .footer-separator, .forgot-mobile .forgot-footer .footer-row:nth-child(2) .footer-separator { display: none !important; } .login-mobile .login-footer .footer-row:nth-child(2) .footer-link, .register-mobile .register-footer .footer-row:nth-child(2) .footer-link, .forgot-mobile .forgot-footer .footer-row:nth-child(2) .footer-link { color: #4e4e60 !important; font-size: 11px !important; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; transition: color .2s; background: none !important; border: none !important; padding: 0 !important; border-radius: 0 !important; } .login-mobile .login-footer .footer-row:nth-child(2) .footer-link:hover, .register-mobile .register-footer .footer-row:nth-child(2) .footer-link:hover, .forgot-mobile .forgot-footer .footer-row:nth-child(2) .footer-link:hover { color: #a78bfa !important; } .login-mobile .login-footer .footer-copy, .register-mobile .register-footer .footer-copy, .forgot-mobile .forgot-footer .footer-copy { margin-top: 6px !important; color: #2a2a3a !important; font-size: 9px !important; text-align: right !important; letter-spacing: .04em; } .footer-link { color: #4e4e60 !important; font-size: 11px !important; font-weight: 600; transition: color .2s; } .footer-link:hover, .footer-link.active { color: #a78bfa !important; } .footer-separator { color: #1f1f30 !important; } .footer-copy { color: #3a3a50 !important; font-size: 10px !important; } /* ---- REGISTER ---- */ .register-mobile { min-height: 100vh; padding: 0 !important; gap: 0 !important; position: relative; overflow: visible !important; } .register-card { width: 100%; max-width: 480px !important; padding: 32px 24px 28px !important; background: rgba(14, 14, 24, .97) !important; border: 1px solid #1f1f30 !important; border-radius: 28px !important; box-shadow: 0 24px 64px rgba(0, 0, 0, .6), 0 0 100px rgba(124, 58, 237, .06) !important; backdrop-filter: blur(24px) !important; position: relative; z-index: 1; } .register-card h1 { color: #eeeef3 !important; font-family: 'Playfair Display', Georgia, serif !important; font-size: 22px !important; letter-spacing: .01em; margin-bottom: 6px !important; } .avatar-mark { background: rgba(30, 30, 46, .8) !important; box-shadow: none !important; border: 1px solid #1f1f30 !important; border-radius: 50% !important; width: 56px !important; height: 56px !important; color: #a78bfa !important; } .avatar-mark span { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; border-radius: 50% !important; } .section-label { color: #7e7e90 !important; font-size: 10px !important; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; padding-bottom: 4px; border-bottom: 1px solid #1f1f30; margin-top: 20px !important; } [data-v-999ba876] .van-cell.register-field { background: transparent !important; border: none !important; border-bottom: 1px solid #1f1f30 !important; border-radius: 0 !important; padding: 12px 0 8px !important; transition: border-color .2s; } [data-v-999ba876] .van-cell.register-field:focus-within { border-bottom-color: #a78bfa !important; } [data-v-999ba876] .register-field .van-field__label { color: #7e7e90 !important; font-size: 11px !important; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; } [data-v-999ba876] .register-field .van-field__control { color: #eeeef3 !important; font-size: 14px; } [data-v-999ba876] .register-field .van-field__control::placeholder { color: #3a3a50 !important; } [data-v-999ba876] .register-field .van-field__right-icon { color: #7e7e90 !important; } .quick-country-row { margin-top: 8px !important; gap: 8px !important; } .quick-country-row button { border: 1px solid #1f1f30 !important; border-radius: 10px !important; color: #7e7e90 !important; background: rgba(20, 20, 32, .6) !important; font-size: 12px !important; font-weight: 700; transition: all .2s; } .quick-country-row button:hover { border-color: #a78bfa !important; color: #c4b5fd !important; } .quick-country-row button.active { border-color: transparent !important; color: #fff !important; background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; } .email-code-button { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; color: #fff !important; border-radius: 10px !important; font-weight: 700; } .email-field-wrap span { color: #4e4e60 !important; font-size: 10px !important; } .submit-wrap { margin-top: 28px !important; } .submit-wrap .van-button { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; border: none !important; border-radius: 16px !important; height: 52px !important; box-shadow: 0 12px 36px rgba(124, 58, 237, .3) !important; font-weight: 700 !important; font-size: 15px !important; } .register-dots { display: none !important; } [data-v-999ba876] .login-links { margin-top: 20px !important; } [data-v-999ba876] .login-links a { color: #a78bfa !important; font-weight: 600; } .option-sheet { background: #12121e !important; border-radius: 24px 24px 0 0 !important; } .sheet-head strong { color: #eeeef3 !important; font-family: 'Playfair Display', Georgia, serif; } .sheet-head button { color: #7e7e90 !important; background: rgba(26, 26, 44, .8) !important; border-radius: 50% !important; } .option-list button { border-color: #1f1f30 !important; background: rgba(20, 20, 32, .6) !important; color: #c4b5fd !important; border-radius: 12px !important; transition: all .2s; } .option-list button:hover { border-color: #a78bfa !important; } .option-list button.active { border-color: transparent !important; color: #fff !important; background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; box-shadow: 0 8px 20px rgba(124, 58, 237, .25) !important; } /* ---- FORGOT PASSWORD ---- */ .forgot-mobile { min-height: 100vh; display: flex !important; align-items: center !important; justify-content: center !important; padding: 24px !important; position: relative; overflow: visible !important; } .forgot-card { width: 100%; max-width: 380px !important; padding: 36px 28px 28px !important; background: rgba(14, 14, 24, .97) !important; border: 1px solid #1f1f30 !important; border-radius: 28px !important; box-shadow: 0 24px 64px rgba(0, 0, 0, .6), 0 0 100px rgba(124, 58, 237, .06) !important; position: relative; z-index: 1; } .forgot-card h1 { color: #eeeef3 !important; font-family: 'Playfair Display', Georgia, serif !important; font-size: 24px !important; } .forgot-card p { color: #7e7e90 !important; font-size: 13px !important; } .forgot-mark { background: rgba(26, 26, 44, .8) !important; box-shadow: none !important; border: 1px solid #1f1f30 !important; border-radius: 50% !important; color: #a78bfa !important; } .forgot-mark span { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; border-radius: 50% !important; } [data-v-ee70ce5c] .van-cell.forgot-field { background: transparent !important; border: none !important; border-bottom: 1px solid #1f1f30 !important; border-radius: 0 !important; padding: 12px 0 8px !important; transition: border-color .2s; } [data-v-ee70ce5c] .van-cell.forgot-field:focus-within { border-bottom-color: #a78bfa !important; } [data-v-ee70ce5c] .forgot-field .van-field__label { color: #7e7e90 !important; font-size: 11px !important; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; } [data-v-ee70ce5c] .forgot-field .van-field__control { color: #eeeef3 !important; } [data-v-ee70ce5c] .forgot-field .van-field__control::placeholder { color: #3a3a50 !important; } [data-v-ee70ce5c] .submit-wrap .van-button { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; border: none !important; border-radius: 16px !important; height: 52px !important; box-shadow: 0 12px 36px rgba(124, 58, 237, .3) !important; } .notice-card { border-color: #1f1f30 !important; background: rgba(26, 26, 44, .6) !important; color: #7e7e90 !important; border-radius: 14px !important; } [data-v-ee70ce5c] .login-links a { color: #a78bfa !important; font-weight: 600; } /* ---- RESET PASSWORD ---- */ .login-mobile[data-v-fa606153] { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 100vh; } .login-card[data-v-fa606153] { background: rgba(14, 14, 24, .97) !important; border: 1px solid #1f1f30 !important; border-radius: 28px !important; max-width: 380px !important; padding: 36px 28px !important; } .login-badge[data-v-fa606153] { color: #7e7e90 !important; } [data-v-fa606153] h1 { color: #eeeef3 !important; font-family: 'Playfair Display', Georgia, serif; } [data-v-fa606153] p { color: #7e7e90 !important; } [data-v-fa606153] .login-links, [data-v-fa606153] .login-links a { color: #a78bfa !important; } /* ============================================================ MEMBER SHELL — center-aligned header, slim tabbar ============================================================ */ .member-shell::before { background: #07070d !important; } .member-shell::after { background: none !important; } /* Header: logo left, avatar + lang + bell right */ .member-header { background: rgba(10, 10, 18, .92) !important; border-bottom: 1px solid #1f1f30 !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; padding: 10px 12px !important; gap: 10px !important; position: sticky !important; top: 0 !important; z-index: 30 !important; display: flex !important; align-items: center !important; } .member-brand { display: flex !important; align-items: center !important; text-decoration: none !important; } .member-logo { background: rgba(26, 26, 44, .5) !important; box-shadow: none !important; border-radius: 12px !important; width: 34px !important; height: 34px !important; } .member-logo img { width: 34px !important; height: 34px !important; border-radius: 12px !important; } .member-header-right { display: flex !important; align-items: center !important; gap: 6px !important; margin-left: auto !important; } .member-user-menu-button { background: rgba(26, 26, 44, .5) !important; border: none !important; border-radius: 10px !important; height: 34px !important; padding: 0 6px !important; display: flex !important; align-items: center !important; gap: 2px !important; cursor: pointer !important; } .member-user-avatar { width: 26px !important; height: 26px !important; border-radius: 50% !important; object-fit: cover !important; } .member-user-avatar-fallback { width: 26px !important; height: 26px !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #a78bfa !important; } .member-user-arrow { color: #7e7e90 !important; font-size: 10px !important; } .member-header-actions { margin-left: 0 !important; } .member-icon-button { color: #7e7e90 !important; background: rgba(26, 26, 44, .5) !important; border: none !important; border-radius: 10px !important; width: 34px !important; height: 34px !important; } .member-language-button { border: none !important; color: #7e7e90 !important; background: rgba(26, 26, 44, .5) !important; border-radius: 10px !important; height: 34px !important; font-size: 11px !important; } .member-language-button em { color: #a78bfa !important; } /* Content area — wider padding, no min-height calc */ .member-content { padding: 12px 12px 80px !important; min-height: auto !important; } /* Tabbar — 3-column icon-only on mobile, minimal */ .member-tabbar { border: none !important; background: rgba(10, 10, 18, .96) !important; box-shadow: 0 -4px 20px rgba(0, 0, 0, .3) !important; backdrop-filter: blur(20px) !important; border-radius: 0 !important; height: 52px !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; transform: none !important; padding: 6px 8px !important; } .member-tabbar-item { color: #4e4e60 !important; border-radius: 12px !important; gap: 1px !important; } /* Hide tab ::before glow bg */ .member-tabbar-item::before { display: none !important; } .member-tabbar-item.active { color: #a78bfa !important; transform: none !important; } .member-tabbar-item.active .tab-icon { color: #fff !important; background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; box-shadow: 0 2px 8px rgba(124, 58, 237, .4) !important; border-radius: 8px !important; width: 22px !important; height: 22px !important; } .member-tabbar-item.active .tab-label { color: #a78bfa !important; font-weight: 700 !important; } .tab-icon { width: 22px !important; height: 22px !important; } .tab-label { font-size: 9px !important; } .member-dot { background: #a78bfa !important; } /* Notice card — top-left toast style */ .member-notice-card { top: 56px !important; left: 12px !important; right: 12px !important; width: auto !important; min-width: 0 !important; border-radius: 16px !important; border-color: #1f1f30 !important; background: rgba(14, 14, 24, .97) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, .5) !important; backdrop-filter: blur(20px) !important; transform: none !important; } .notice-avatar { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; border-radius: 12px !important; } .notice-action { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; border-radius: 999px !important; } .notice-close { color: #4e4e60 !important; background: rgba(26, 26, 44, .5) !important; border-radius: 8px !important; } .notice-head strong { color: #eeeef3 !important; } .notice-head span { color: #4e4e60 !important; } .notice-main p { color: #7e7e90 !important; } /* ============================================================ HOME / DISCOVER — staggered grid, sticky search ============================================================ */ .home-shell { background: #07070d !important; gap: 8px !important; padding: 0 0 16px !important; } /* Notification: full-width top bar */ .notification-strip { background: rgba(167, 139, 250, .08) !important; border: none !important; border-radius: 0 !important; color: #c4b5fd !important; box-shadow: none !important; margin: 0 !important; padding: 8px 16px !important; font-size: 12px !important; } .notification-strip button { color: #a78bfa !important; font-weight: 800 !important; } /* Search: sticky below notification */ .search-panel { position: sticky !important; top: 0 !important; z-index: 10 !important; background: #07070d !important; padding: 8px 12px !important; } .search-panel .van-search__content { border: none !important; background: rgba(26, 26, 44, .6) !important; box-shadow: none !important; border-radius: 12px !important; } .search-panel .van-field__control { color: #eeeef3 !important; } .search-panel .van-field__control::placeholder { color: #4e4e60 !important; } .search-button { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; box-shadow: none !important; border-radius: 12px !important; height: 36px !important; min-width: 36px !important; padding: 0 !important; } /* Discover grid — tight 2-col, staggered heights */ .discover-grid { gap: 8px !important; padding: 0 12px !important; } .discover-card { position: relative !important; border: none !important; background: transparent !important; box-shadow: none !important; border-radius: 14px !important; overflow: hidden; } /* Stagger: odd cards shorter, even cards taller */ .discover-card:nth-child(odd) .photo-button { height: 180px !important; } .discover-card:nth-child(even) .photo-button { height: 240px !important; } .photo-button { height: 200px !important; padding: 0 !important; border-radius: 14px !important; } .photo-button img { border-radius: 14px !important; background: #1a1a2c !important; } /* Card info — overlaid at bottom of photo */ .card-body { position: absolute !important; bottom: 0; left: 0; right: 0; padding: 36px 10px 6px !important; background: linear-gradient(transparent, rgba(7, 7, 13, .9)) !important; border-radius: 0 !important; } .card-name-button strong { color: #eeeef3 !important; text-shadow: 0 1px 4px rgba(0, 0, 0, .8); font-size: 13px !important; } .card-name-button strong em { color: #7e7e90 !important; font-size: 10px !important; } /* Actions — single row of icon buttons overlaid */ .card-actions { position: absolute !important; bottom: 30px; left: 0; right: 0; padding: 0 6px !important; background: transparent !important; gap: 4px !important; } .card-actions button { color: #7e7e90 !important; background: rgba(7, 7, 13, .6) !important; box-shadow: none !important; border: none !important; border-radius: 8px !important; backdrop-filter: blur(6px); height: 24px !important; font-size: 10px !important; min-width: 24px !important; padding: 0 6px !important; } .card-actions button:first-child { color: #fff !important; background: rgba(124, 58, 237, .7) !important; box-shadow: none !important; border: none !important; } /* Pagination — inline row, no card bg */ .member-pagination { border: none !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; padding: 8px 12px !important; margin: 4px 12px 0 !important; } .page-step { color: #c4b5fd !important; background: rgba(26, 26, 44, .6) !important; box-shadow: none !important; border-radius: 10px !important; min-width: 60px !important; height: 32px !important; } .page-number { color: #7e7e90 !important; background: rgba(26, 26, 44, .4) !important; width: 30px !important; height: 30px !important; } .page-number.active { color: #fff !important; background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; box-shadow: none !important; } .page-summary { color: #4e4e60 !important; font-size: 11px !important; } .page-summary strong { color: #c4b5fd !important; } .page-controls { display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 4px 0 !important; } .sheet-title { color: #eeeef3 !important; } .gift-close { color: #4e4e60 !important; background: rgba(26, 26, 44, .5) !important; border-radius: 8px !important; } .gift-item { border-color: #1f1f30 !important; color: #c4b5fd !important; background: rgba(20, 20, 32, .5) !important; border-radius: 14px !important; } .gift-item span { color: #a78bfa !important; } /* ============================================================ PROFILE PAGE — centered avatar hero, horizontal stats ============================================================ */ .profile-shell { background: #07070d !important; gap: 12px !important; } .profile-hero { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 16px 12px 0 !important; } .profile-hero::before { display: none !important; } /* Center the hero: avatar on top, name below */ .hero-panel { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 12px !important; } .hero-profile { flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 10px !important; } .avatar-wrap { width: 80px !important; } .avatar-button { width: 80px !important; height: 80px !important; } .avatar-ring { width: 80px !important; height: 80px !important; background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; box-shadow: 0 4px 12px rgba(124, 58, 237, .3) !important; padding: 4px !important; } .avatar-placeholder { width: 72px !important; height: 72px !important; font-size: 28px !important; } .avatar-placeholder-male { background: linear-gradient(135deg, #60a5fa, #2563eb) !important; } .avatar-placeholder-female { background: linear-gradient(135deg, #f472b6, #ec4899) !important; } .camera-badge { width: 28px !important; height: 28px !important; background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; box-shadow: none !important; border-radius: 8px !important; } .hero-copy { align-items: center !important; } .hero-name-row { justify-content: center !important; } .hero-name-row h2 { color: #eeeef3 !important; font-size: 22px !important; text-align: center !important; } .member-level-chip { color: #a78bfa !important; background: rgba(167, 139, 250, .1) !important; box-shadow: none !important; height: 20px !important; font-size: 10px !important; } /* Stats: horizontal row of compact pills */ .hero-stats { grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; width: 100% !important; } .hero-stat-card { border: none !important; background: rgba(26, 26, 44, .4) !important; box-shadow: none !important; border-radius: 10px !important; min-height: 48px !important; padding: 6px 8px !important; gap: 2px !important; } .hero-stat-card-wide { grid-column: auto !important; grid-template-columns: auto minmax(0,1fr) !important; } .stat-label { color: #7e7e90 !important; font-size: 9px !important; } .hero-stat-card strong { color: #eeeef3 !important; font-size: 14px !important; } /* First recharge — horizontal slim card */ .first-recharge-card { background: rgba(124, 58, 237, .12) !important; box-shadow: none !important; border-radius: 14px !important; padding: 12px !important; border: 1px solid rgba(167, 139, 250, .15) !important; } .first-recharge-card::after { display: none !important; } .first-recharge-badge { width: 48px !important; height: 48px !important; border-radius: 12px !important; background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; box-shadow: none !important; } .first-recharge-main { flex: 1 !important; min-width: 0 !important; } .first-recharge-copy strong { color: #eeeef3 !important; font-size: 16px !important; } .first-recharge-price { color: #c4b5fd !important; } .first-recharge-copy p { color: rgba(238, 238, 243, .5) !important; } .first-recharge-action { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; color: #fff !important; box-shadow: none !important; border-radius: 10px !important; min-width: auto !important; padding: 8px 14px !important; font-size: 12px !important; } /* Menu — compact icon+label grid, 2 columns */ .profile-menu-card { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 12px !important; } .menu-list { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; } .menu-item { background: rgba(26, 26, 44, .4) !important; border-radius: 12px !important; border: none !important; padding: 10px !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 4px !important; text-align: center !important; } .menu-item:active { background: rgba(26, 26, 44, .6) !important; } .menu-left { flex-direction: column !important; align-items: center !important; gap: 4px !important; } .menu-icon { width: 32px !important; height: 32px !important; border-radius: 10px !important; } .menu-copy { align-items: center !important; gap: 0 !important; } .menu-copy strong { font-size: 12px !important; } .menu-copy span { display: none !important; } .menu-arrow { display: none !important; } /* ============================================================ USER DETAIL PAGE — vertical profile, horizontal gallery ============================================================ */ .user-detail-shell { background: #07070d !important; gap: 10px !important; padding: 8px 12px 26px !important; } /* Detail toolbar / header */ .detail-toolbar { background: rgba(10, 10, 18, .96) !important; border-bottom: 1px solid #1f1f30 !important; backdrop-filter: blur(20px) !important; padding: 10px 12px !important; gap: 10px !important; position: sticky !important; top: 0 !important; z-index: 30 !important; } .detail-toolbar .back-button, .detail-toolbar .round-button { color: #c4b5fd !important; background: rgba(26, 26, 44, .6) !important; border-radius: 10px !important; } .detail-toolbar strong { color: #eeeef3 !important; font-size: 15px !important; } /* Profile card: vertical center */ .profile-card { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 12px 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 8px !important; } .avatar-frame { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; box-shadow: 0 4px 12px rgba(124, 58, 237, .3) !important; width: 72px !important; height: 72px !important; padding: 4px !important; } .profile-copy { align-items: center !important; } .profile-copy h1 { color: #eeeef3 !important; font-size: 22px !important; text-align: center !important; } /* Info grid: horizontal scroll instead of wrap */ .profile-info-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important; gap: 6px !important; } .profile-info-card, .profile-info-card--wide { border: none !important; background: rgba(26, 26, 44, .4) !important; box-shadow: none !important; border-radius: 10px !important; padding: 6px 8px !important; grid-template-columns: 24px minmax(0,1fr) !important; gap: 6px !important; min-height: auto !important; } .info-icon { width: 24px !important; height: 24px !important; border-radius: 6px !important; } .info-copy span { font-size: 9px !important; } .info-copy strong { font-size: 11px !important; } .detail-panel { background: rgba(14, 14, 24, .97) !important; border: 1px solid #1f1f30 !important; border-radius: 14px !important; box-shadow: none !important; padding: 10px !important; } .section-row h2, .about-panel h2 { color: #eeeef3 !important; font-size: 14px !important; } .section-row > span { color: #a78bfa !important; font-size: 11px !important; } /* Gallery: horizontal scroll */ .gallery-grid { grid-template-columns: repeat(6, 80px) !important; gap: 4px !important; overflow-x: auto !important; overflow-y: hidden !important; grid-auto-flow: column !important; } .gallery-panel { background: rgba(14, 14, 24, .6) !important; border: 1px solid #1f1f30 !important; border-radius: 14px !important; padding: 12px !important; } .gallery-tile { background: #1a1a2c !important; box-shadow: none !important; border-radius: 10px !important; aspect-ratio: 1 !important; } .empty-panel, .detail-empty { background: transparent !important; color: #4e4e60 !important; box-shadow: none !important; min-height: 60px !important; } .empty-cover { background: #1a1a2c !important; border-radius: 10px !important; } .about-panel p { color: #7e7e90 !important; font-size: 12px !important; } .moment-card { background: rgba(26, 26, 44, .4) !important; box-shadow: none !important; border: none !important; border-radius: 12px !important; grid-template-columns: 90px minmax(0,1fr) !important; } .moment-cover { background: #1a1a2c !important; } .moment-text { color: #eeeef3 !important; font-size: 11px !important; } .moment-foot { color: #7e7e90 !important; font-size: 10px !important; } .love-count { color: #a78bfa !important; } .round-button { background: rgba(26, 26, 44, .5) !important; color: #a78bfa !important; box-shadow: none !important; border: none !important; width: 34px !important; height: 34px !important; } .edit-display-button { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; box-shadow: none !important; border-radius: 10px !important; min-height: 32px !important; font-size: 11px !important; } /* ============================================================ MESSAGES / INBOX — horizontal scroll filters, compact rows ============================================================ */ .inbox-shell { background: #07070d !important; gap: 6px !important; padding-bottom: 80px !important; } /* Hero: dark glass card, hide decorative glow */ .glass-card.inbox-hero { background: rgba(14, 14, 24, .97) !important; border: 1px solid #1f1f30 !important; border-radius: 16px !important; box-shadow: none !important; } .hero-glow, .hero-glow-left, .hero-glow-right { display: none !important; } .hero-main { color: #eeeef3 !important; } .hero-unread { color: #a78bfa !important; font-size: 11px !important; } .hero-stats { gap: 6px !important; } .hero-stat { background: rgba(26, 26, 44, .4) !important; border-radius: 10px !important; border: none !important; padding: 6px 8px !important; color: #eeeef3 !important; font-size: 12px !important; } .hero-stat span { color: #7e7e90 !important; font-size: 9px !important; } .hero-stat strong { color: #eeeef3 !important; } /* Toolbar: horizontal scroll instead of 5-col grid */ .inbox-toolbar { padding: 4px 0 0 !important; } .toolbar-grid { display: flex !important; overflow-x: auto !important; overflow-y: hidden !important; grid-template-columns: none !important; gap: 6px !important; padding: 0 12px !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch; } .toolbar-grid::-webkit-scrollbar { display: none !important; } .toolbar-pill { background: rgba(14, 14, 24, .8) !important; color: #7e7e90 !important; box-shadow: none !important; border: 1px solid #1f1f30 !important; border-radius: 10px !important; white-space: nowrap !important; flex: 0 0 auto !important; padding: 7px 14px !important; font-size: 12px !important; } .toolbar-pill.active { color: #fff !important; background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; box-shadow: 0 4px 12px rgba(124, 58, 237, .3) !important; border-color: transparent !important; } .toolbar-pill em { background: rgba(167, 139, 250, .2) !important; color: #a78bfa !important; font-size: 9px !important; } .toolbar-pill.active em { background: rgba(255, 255, 255, .2) !important; color: #fff !important; } .notice-strip { background: rgba(124, 58, 237, .08) !important; color: #c4b5fd !important; border: none !important; border-radius: 0 !important; margin: 0 !important; padding: 6px 12px !important; font-size: 12px !important; } .notice-dot { background: #a78bfa !important; } .notice-action { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; color: #fff !important; border-radius: 8px !important; font-size: 11px !important; padding: 4px 10px !important; } /* Message list: no big border-radius, flat edges */ .glass-card.inbox-list-card { background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 12px !important; } .section-head { padding: 0 12px !important; margin-bottom: 6px !important; } .section-title { color: #eeeef3 !important; font-size: 14px !important; font-weight: 700 !important; } .section-subtitle { color: #7e7e90 !important; font-size: 11px !important; } .message-list { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; } /* Compact rows: smaller avatars, tighter spacing */ .message-row { background: rgba(14, 14, 24, .6) !important; border: none !important; border-radius: 14px !important; padding: 10px 10px !important; gap: 8px !important; margin-bottom: 4px !important; border-bottom: none !important; } .message-row:active { background: rgba(26, 26, 44, .7) !important; } .message-row.locked { background: rgba(124, 58, 237, .06) !important; border: 1px solid rgba(167, 139, 250, .12) !important; } /* Smaller avatars in inbox */ .avatar-box { flex: 0 0 auto !important; } .avatar-image, .avatar-fallback { width: 40px !important; height: 40px !important; border-radius: 12px !important; } .avatar-fallback { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; font-size: 14px !important; } .unread-badge { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; min-width: 16px !important; height: 16px !important; font-size: 9px !important; top: -3px !important; right: -3px !important; } .online-status-dot { width: 8px !important; height: 8px !important; } .online-status-dot.online { background: #34d399 !important; } .online-status-dot.offline { background: #4e4e60 !important; } .message-main { flex: 1 !important; min-width: 0 !important; } .message-title-row { justify-content: space-between !important; gap: 6px !important; } .message-name { color: #eeeef3 !important; font-size: 13px !important; font-weight: 600 !important; } .message-time { color: #4e4e60 !important; font-size: 10px !important; white-space: nowrap !important; } .message-preview { color: #7e7e90 !important; font-size: 11px !important; } .message-tags { gap: 4px !important; margin-top: 3px !important; } .mini-tag { font-size: 9px !important; padding: 1px 6px !important; border-radius: 6px !important; } .mini-tag.gold { color: #a78bfa !important; background: rgba(167, 139, 250, .12) !important; } .mini-tag.rose { color: #f472b6 !important; background: rgba(244, 114, 182, .12) !important; } .mini-tag.warn { color: #fbbf24 !important; background: rgba(251, 191, 36, .12) !important; } .row-arrow { color: #4e4e60 !important; font-size: 10px !important; } .row-actions { gap: 4px !important; } .delete-conversation-button { color: #ef4444 !important; background: rgba(239, 68, 68, .08) !important; border-radius: 8px !important; font-size: 10px !important; padding: 4px 8px !important; } .return-gift-button { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; border-radius: 8px !important; font-size: 10px !important; padding: 4px 8px !important; } /* Locked card: vertical center */ .locked-card { background: rgba(14, 14, 24, .97) !important; border: 1px solid rgba(167, 139, 250, .15) !important; color: #c4b5fd !important; border-radius: 14px !important; flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 20px 16px !important; gap: 8px !important; } .locked-avatar { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; width: 48px !important; height: 48px !important; border-radius: 14px !important; } .locked-card strong { color: #eeeef3 !important; font-size: 14px !important; } .locked-card p { color: #7e7e90 !important; font-size: 12px !important; } .locked-card button { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; border-radius: 10px !important; font-size: 12px !important; padding: 8px 20px !important; } /* ============================================================ IM / CHAT — no arrows, pill bubbles, compact header ============================================================ */ .chat-shell { background: #07070d !important; color: #eeeef3 !important; } /* Header: compact, centered title */ .chat-header { background: rgba(10, 10, 18, .96) !important; border-bottom: 1px solid #1f1f30 !important; backdrop-filter: blur(20px) !important; padding: 10px 8px !important; gap: 6px !important; } .back-button { color: #c4b5fd !important; background: rgba(26, 26, 44, .6) !important; border-radius: 10px !important; width: 32px !important; height: 32px !important; min-width: 32px !important; font-size: 0 !important; } .back-button .van-icon { font-size: 14px !important; } .chat-title strong { color: #eeeef3 !important; font-size: 14px !important; } .tag-pill { color: #a78bfa !important; background: rgba(167, 139, 250, .12) !important; border-radius: 6px !important; font-size: 9px !important; padding: 2px 6px !important; } .tag-pill.rose { color: #f472b6 !important; background: rgba(244, 114, 182, .12) !important; } .chat-icons button { color: #7e7e90 !important; background: rgba(26, 26, 44, .6) !important; border-radius: 10px !important; width: 32px !important; height: 32px !important; } /* Contact strip: horizontal scroll */ .contact-strip { background: rgba(10, 10, 18, .96) !important; border-bottom: 1px solid #1f1f30 !important; overflow-x: auto !important; overflow-y: hidden !important; flex-wrap: nowrap !important; padding: 4px 8px !important; gap: 4px !important; scrollbar-width: none !important; } .contact-strip::-webkit-scrollbar { display: none !important; } .contact-strip button { border-color: #1f1f30 !important; color: #7e7e90 !important; background: rgba(26, 26, 44, .5) !important; border-radius: 8px !important; flex: 0 0 auto !important; white-space: nowrap !important; padding: 4px 8px !important; font-size: 11px !important; } /* Chat body: darker */ .chat-body { background: #07070d !important; } /* Avatars: square-rounded, smaller */ .message-avatar { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; box-shadow: none !important; width: 32px !important; height: 32px !important; border-radius: 10px !important; font-size: 12px !important; } .message-item { gap: 6px !important; } /* Bubbles: fully pill-shaped, no arrow triangles */ .bubble { background: rgba(26, 26, 44, .85) !important; color: #eeeef3 !important; box-shadow: none !important; border-radius: 20px !important; padding: 8px 14px !important; border: 1px solid #1f1f30 !important; } /* Kill the ::before arrow triangles */ .bubble::before, .message-item.mine .bubble::before { display: none !important; content: none !important; width: 0 !important; height: 0 !important; background: none !important; } /* Mine bubbles: purple gradient pill */ .message-item.mine .bubble { background: linear-gradient(135deg, rgba(124, 58, 237, .45), rgba(167, 139, 250, .35)) !important; color: #eeeef3 !important; box-shadow: none !important; border-radius: 20px !important; border: 1px solid rgba(167, 139, 250, .2) !important; } .message-name { color: #7e7e90 !important; font-size: 11px !important; } .message-meta { color: #4e4e60 !important; font-size: 9px !important; } .translation-box { background: rgba(26, 26, 44, .5) !important; color: #7e7e90 !important; border-radius: 10px !important; font-size: 11px !important; margin-top: 4px !important; } .translate-icon-button { color: #a78bfa !important; background: rgba(26, 26, 44, .6) !important; box-shadow: none !important; border-radius: 8px !important; width: 26px !important; height: 26px !important; } .gift-message-card { background: rgba(14, 14, 24, .97) !important; border: 1px solid #1f1f30 !important; color: #eeeef3 !important; border-radius: 14px !important; } .gift-message-card span { color: #a78bfa !important; } .system-line { color: #4e4e60 !important; font-size: 11px !important; } /* Composer preview: compact */ .composer-preview { background: rgba(10, 10, 18, .96) !important; color: #c4b5fd !important; border-top: 1px solid #1f1f30 !important; padding: 6px 10px !important; font-size: 12px !important; } .composer-preview button { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; border-radius: 8px !important; font-size: 11px !important; padding: 4px 10px !important; } /* Composer: tools row above input */ .composer { background: rgba(10, 10, 18, .98) !important; border-top: 1px solid #1f1f30 !important; padding: 4px 8px 8px !important; gap: 4px !important; } .composer-input { background: rgba(26, 26, 44, .6) !important; border-radius: 20px !important; border: 1px solid #1f1f30 !important; overflow: hidden; } .composer-input .van-cell { background: transparent !important; } .send-button { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; border-radius: 12px !important; width: 34px !important; height: 34px !important; min-width: 34px !important; font-size: 0 !important; } .tool-icon { color: #7e7e90 !important; font-size: 16px !important; } /* Panels */ .emoji-panel, .tool-panel, .packet-panel { background: #12121e !important; border-top: 1px solid #1f1f30 !important; border-radius: 0 !important; } .tool-card { background: rgba(26, 26, 44, .6) !important; color: #eeeef3 !important; border-radius: 10px !important; } .tool-card.active { color: #fff !important; background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; } .comment-sheet { background: #12121e !important; border-radius: 20px 20px 0 0 !important; } .comment-item { background: rgba(26, 26, 44, .5) !important; border-radius: 10px !important; } .comment-user { color: #c4b5fd !important; } .comment-text { color: #7e7e90 !important; } .video-review-panel { background: rgba(10, 10, 18, .98) !important; border-top: 1px solid #1f1f30 !important; } .upload-progress { background: rgba(14, 14, 24, .97) !important; border-top: 1px solid #1f1f30 !important; color: #c4b5fd !important; } .history-loader button { background: rgba(26, 26, 44, .7) !important; border-color: #1f1f30 !important; color: #c4b5fd !important; box-shadow: none !important; border-radius: 10px !important; } /* Video player dark */ .media-video-player { border-radius: 14px !important; background: #1a1a2c !important; } .media-video-controls { background: linear-gradient(transparent, rgba(7, 7, 13, .8)) !important; padding: 18px 6px 5px !important; } .video-control-button { color: #7e7e90 !important; } .video-time-label { color: #4e4e60 !important; font-size: 10px !important; } .video-progress-bar { background: rgba(26, 26, 44, .5) !important; } .video-progress-fill { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; } /* ============================================================ ZONE — compact cards, square photos, icon-only actions ============================================================ */ .zone-shell { background: #07070d !important; gap: 8px !important; padding-bottom: 80px !important; } /* Toolbar: no search, just publish + compact filter */ .zone-toolbar { padding: 4px 12px 0 !important; gap: 6px !important; } .zone-toolbar .van-search { flex: 1 !important; } .zone-toolbar .van-search__content { border: 1px solid #1f1f30 !important; background: rgba(14, 14, 24, .9) !important; box-shadow: none !important; border-radius: 12px !important; } .zone-toolbar .van-field__control { color: #eeeef3 !important; } .zone-toolbar .van-field__control::placeholder { color: #4e4e60 !important; } .search-button { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; box-shadow: none !important; border-radius: 12px !important; height: 36px !important; min-width: 36px !important; padding: 0 !important; } .toolbar-publish-button { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; box-shadow: 0 4px 12px rgba(124, 58, 237, .3) !important; border-radius: 12px !important; padding: 8px 12px !important; font-size: 12px !important; height: 36px !important; } /* Summary: inline text */ .panel-card { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 4px 12px !important; } .zone-summary { color: #7e7e90 !important; font-size: 11px !important; } /* Zone cards: flat, compact, no big border-radius */ .zone-list { gap: 6px !important; padding: 0 12px !important; margin-top: 0 !important; } .zone-card { background: rgba(14, 14, 24, .8) !important; border: 1px solid #1f1f30 !important; box-shadow: none !important; border-radius: 16px !important; padding: 0 0 10px !important; overflow: hidden; } /* Card head: smaller avatar */ .zone-head { padding: 10px 10px 6px !important; gap: 8px !important; } .zone-avatar { width: 36px !important; height: 36px !important; border-radius: 10px !important; background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; box-shadow: none !important; font-size: 13px !important; } .zone-user { color: #eeeef3 !important; font-size: 13px !important; font-weight: 600 !important; } .zone-author { color: #7e7e90 !important; font-size: 11px !important; } .zone-time { color: #4e4e60 !important; font-size: 10px !important; } .zone-text-row { padding: 0 10px !important; gap: 6px !important; } .zone-text { color: #eeeef3 !important; font-size: 13px !important; } .inline-zone-text { color: #eeeef3 !important; font-size: 13px !important; } .zone-text.muted { color: #4e4e60 !important; } .translation-box { background: rgba(26, 26, 44, .5) !important; color: #7e7e90 !important; border-radius: 8px !important; font-size: 11px !important; } .inline-translate-button { border-color: rgba(167, 139, 250, .2) !important; color: #a78bfa !important; background: rgba(26, 26, 44, .5) !important; border-radius: 8px !important; font-size: 10px !important; padding: 3px 8px !important; } /* Photo grid: square tiles, tighter */ .photo-grid { gap: 2px !important; padding: 6px 10px !important; } .photo-button { background: #1a1a2c !important; border-radius: 10px !important; aspect-ratio: 1 !important; } .photo-button img { border-radius: 10px !important; } /* Action pills: icon-only compact */ .zone-actions { gap: 4px !important; padding: 4px 10px 0 !important; } .action-pill { border-color: transparent !important; color: #7e7e90 !important; background: rgba(26, 26, 44, .4) !important; border-radius: 10px !important; padding: 5px 8px !important; font-size: 11px !important; gap: 3px !important; } .action-pill.active { color: #fff !important; background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; border-color: transparent !important; } .action-pill .action-icon { width: 16px !important; height: 16px !important; } .gift-action { color: #a78bfa !important; border-color: rgba(167, 139, 250, .2) !important; background: rgba(26, 26, 44, .5) !important; border-radius: 10px !important; } /* Comment sheet */ .comment-sheet { background: #12121e !important; border-radius: 20px 20px 0 0 !important; } .comment-form { background: transparent !important; border-top: 1px solid #1f1f30 !important; padding: 8px !important; } .comment-form .van-cell { background: rgba(26, 26, 44, .6) !important; border-radius: 12px !important; } .comment-form .van-button { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; border-radius: 10px !important; } .zone-comment-popup { background: #12121e !important; border-radius: 20px 20px 0 0 !important; } .zone-pagination { border: none !important; background: transparent !important; box-shadow: none !important; padding: 8px 12px !important; } .comment-item { background: rgba(26, 26, 44, .5) !important; border-radius: 10px !important; } .comment-user { color: #c4b5fd !important; } .comment-text { color: #7e7e90 !important; } /* ============================================================ WALLET — single-line records, pill tabs ============================================================ */ .wallet-shell { background: #07070d !important; gap: 8px !important; padding-bottom: 80px !important; } /* Tabs: pill-style instead of underline */ .wallet-shell .van-tabs__nav { background: transparent !important; } .wallet-shell .van-tab { color: #7e7e90 !important; background: rgba(26, 26, 44, .4) !important; border-radius: 10px !important; margin: 0 3px !important; padding: 6px 14px !important; font-size: 12px !important; font-weight: 600 !important; } .wallet-shell .van-tab--active { color: #fff !important; background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; box-shadow: 0 4px 12px rgba(124, 58, 237, .3) !important; } .wallet-shell .van-tabs__line { display: none !important; } /* Record card: transparent, no border */ .wallet-record-card { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 12px !important; } .wallet-record-card h3 { color: #eeeef3 !important; font-size: 14px !important; } .subtitle { color: #7e7e90 !important; font-size: 11px !important; } /* Record list: compact */ .record-list { gap: 4px !important; margin-top: 8px !important; } /* Record items: single-line compact row */ .record-item { background: rgba(14, 14, 24, .6) !important; border-radius: 14px !important; padding: 8px 10px !important; gap: 8px !important; align-items: center !important; border: none !important; } /* Smaller media icon */ .record-media { width: 34px !important; height: 34px !important; border-radius: 10px !important; background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; font-size: 14px !important; } .record-media.gold { background: linear-gradient(135deg, #fbbf24, #f97316) !important; } .record-media.mint { background: linear-gradient(135deg, #34d399, #10b981) !important; } .record-media.blue { background: linear-gradient(135deg, #60a5fa, #2563eb) !important; } .record-main { flex: 1 !important; min-width: 0 !important; } .record-title-row { justify-content: space-between !important; gap: 8px !important; align-items: center !important; } .record-title-row strong { color: #eeeef3 !important; font-size: 12px !important; } .record-amount { color: #a78bfa !important; font-size: 12px !important; font-weight: 700 !important; } .record-amount.income { color: #34d399 !important; } .record-main p { color: #7e7e90 !important; font-size: 11px !important; margin: 0 !important; } .record-meta { color: #4e4e60 !important; font-size: 9px !important; gap: 4px !important; margin-top: 2px !important; } /* Section head */ .section-head { padding: 0 12px !important; margin-bottom: 6px !important; } /* ============================================================ EDIT / SETTINGS / PASSWORD / PUBLISH / ABOUT / RECHARGE ============================================================ */ .edit-shell, .password-shell, .publish-shell, .about-shell, .recharge-shell { background: #07070d !important; gap: 8px !important; padding-bottom: 80px !important; } /* Cards: borderless, transparent */ .edit-card, .publish-card { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 12px !important; } .edit-shell .van-cell, .password-shell .van-cell, .publish-shell .van-cell { background: rgba(14, 14, 24, .6) !important; border-bottom: none !important; border-radius: 14px !important; color: #eeeef3 !important; margin-bottom: 4px !important; padding: 10px 12px !important; } .edit-shell .van-cell:focus-within, .password-shell .van-cell:focus-within { border-bottom: none !important; background: rgba(26, 26, 44, .8) !important; } /* Password page: dark card */ .password-card { background: rgba(14, 14, 24, .97) !important; border: 1px solid #1f1f30 !important; border-radius: 16px !important; padding: 16px 12px !important; } /* Avatar card on edit page */ .avatar-card { background: rgba(14, 14, 24, .6) !important; border: 1px solid #1f1f30 !important; border-radius: 16px !important; } .avatar-actions { gap: 6px !important; } .avatar-ring { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; box-shadow: 0 4px 12px rgba(124, 58, 237, .3) !important; } .avatar-upload-button { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; border-radius: 10px !important; color: #fff !important; } .ghost-button { color: #7e7e90 !important; background: rgba(26, 26, 44, .4) !important; border-radius: 10px !important; } .ghost-button.danger { color: #ef4444 !important; background: rgba(239, 68, 68, .08) !important; border: 1px solid rgba(239, 68, 68, .2) !important; } .field-grid { gap: 4px !important; } .field-label-row { color: #7e7e90 !important; font-size: 10px !important; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; } .native-date-input { background: rgba(26, 26, 44, .4) !important; border: 1px solid #1f1f30 !important; border-radius: 10px !important; color: #eeeef3 !important; } .form-section-title { color: #7e7e90 !important; font-size: 10px !important; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; } .gender-options { gap: 6px !important; } .gender-options button { border: 1px solid #1f1f30 !important; background: rgba(26, 26, 44, .4) !important; color: #7e7e90 !important; border-radius: 10px !important; } .gender-options button.active { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; color: #fff !important; border-color: transparent !important; } .switch-grid { gap: 4px !important; } .select-field { background: rgba(14, 14, 24, .6) !important; border-radius: 14px !important; } /* About tabs: pill-style */ .about-shell .van-tabs__nav { background: transparent !important; } .about-shell .van-tab { color: #7e7e90 !important; background: rgba(26, 26, 44, .4) !important; border-radius: 10px !important; margin: 0 3px !important; padding: 6px 14px !important; font-size: 12px !important; font-weight: 600 !important; } .about-shell .van-tab--active { color: #fff !important; background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; } .about-shell .van-tabs__line { display: none !important; } .about-tabs { padding: 0 12px !important; } .about-kicker { color: #a78bfa !important; font-size: 10px !important; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; } .about-card, .about-panel { background: rgba(14, 14, 24, .6) !important; border: 1px solid #1f1f30 !important; border-radius: 14px !important; padding: 12px !important; margin: 0 12px 6px !important; box-shadow: none !important; } .about-head h2 { color: #eeeef3 !important; font-size: 14px !important; } .about-content { color: #7e7e90 !important; font-size: 12px !important; line-height: 1.5 !important; } /* Recharge: dark header, compact preset grid */ .recharge-header { background: rgba(14, 14, 24, .97) !important; border: none !important; border-radius: 16px !important; padding: 16px 12px !important; } .recharge-shell .back-button { color: #c4b5fd !important; background: rgba(26, 26, 44, .6) !important; border-radius: 10px !important; width: 32px !important; height: 32px !important; } .recharge-shell .van-cell, .preset-list button { background: rgba(14, 14, 24, .6) !important; border-color: #1f1f30 !important; color: #eeeef3 !important; border-radius: 14px !important; } /* Recharge plans */ .preset-list { gap: 6px !important; } .preset-list button { padding: 12px !important; font-size: 14px !important; font-weight: 700 !important; background: rgba(14, 14, 24, .6) !important; border: 1px solid #1f1f30 !important; border-radius: 14px !important; color: #eeeef3 !important; } .plan-media { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; border-radius: 12px !important; } .plan-title-row strong { color: #eeeef3 !important; } .plan-price { color: #a78bfa !important; font-weight: 800 !important; } .plan-copy span { color: #7e7e90 !important; font-size: 11px !important; } .plan-ribbon { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; border-radius: 8px !important; color: #fff !important; font-size: 10px !important; } .selected-glow { background: rgba(167, 139, 250, .08) !important; border-color: rgba(167, 139, 250, .3) !important; } .custom-amount { background: rgba(14, 14, 24, .6) !important; border: 1px solid #1f1f30 !important; border-radius: 14px !important; } .custom-input-wrap { background: rgba(26, 26, 44, .4) !important; border-radius: 12px !important; } .service-card { background: rgba(14, 14, 24, .6) !important; border: 1px solid #1f1f30 !important; border-radius: 14px !important; } .summary-line { color: #7e7e90 !important; font-size: 12px !important; } .stripe-container { background: rgba(14, 14, 24, .97) !important; border-radius: 14px !important; } .first-recharge-tip { background: rgba(124, 58, 237, .08) !important; color: #c4b5fd !important; border-radius: 12px !important; } .save-row .van-button, .save-action .van-button { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; border: none !important; border-radius: 16px !important; height: 48px !important; font-size: 14px !important; box-shadow: 0 8px 24px rgba(124, 58, 237, .3) !important; } .page-header { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 12px !important; } .field-card { background: rgba(14, 14, 24, .6) !important; border-color: #1f1f30 !important; border-radius: 14px !important; margin-bottom: 4px !important; } .switch-card { background: rgba(14, 14, 24, .6) !important; border-color: #1f1f30 !important; border-radius: 14px !important; margin-bottom: 4px !important; } /* Settings / Gifts / Relations */ .panel-card .van-cell { background: rgba(14, 14, 24, .6) !important; border-bottom: none !important; border-radius: 14px !important; color: #eeeef3 !important; margin-bottom: 4px !important; } .section-title { color: #eeeef3 !important; font-size: 14px !important; } .settings-group { background: transparent !important; border: none !important; border-radius: 0 !important; } .glass-card.settings-group { background: transparent !important; border: none !important; box-shadow: none !important; } /* Zone comment popup */ .zone-comment-popup { background: #12121e !important; border-radius: 20px 20px 0 0 !important; } /* Loading panel */ .loading-panel { background: transparent !important; color: #4e4e60 !important; } /* Meet Display */ .home-display-shell { background: #07070d !important; } .display-page-header { background: rgba(10, 10, 18, .96) !important; border-color: #1f1f30 !important; } .display-card { background: rgba(14, 14, 24, .97) !important; border-color: #1f1f30 !important; border-radius: 16px !important; } /* ============================================================ GLOBAL VANT OVERRIDES ============================================================ */ .van-cell { background: rgba(14, 14, 24, .97) !important; color: #eeeef3 !important; } .van-cell__title { color: #eeeef3 !important; } .van-cell__value { color: #7e7e90 !important; } .van-cell__label { color: #4e4e60 !important; } .van-field__control { color: #eeeef3 !important; } .van-field__control::placeholder { color: #3a3a50 !important; } .van-field__label { color: #7e7e90 !important; } .van-field__right-icon { color: #7e7e90 !important; } .van-field__left-icon { color: #7e7e90 !important; } .van-button--primary { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; border-color: transparent !important; } .van-button--default { background: rgba(26, 26, 44, .7) !important; border-color: #1f1f30 !important; color: #c4b5fd !important; } .van-popup { background: #12121e !important; } .van-popup--bottom { background: #12121e !important; } .van-overlay { background: rgba(0, 0, 0, .75) !important; } .van-action-sheet { background: #12121e !important; } .van-action-sheet__item { color: #eeeef3 !important; } .van-action-sheet__cancel { color: #7e7e90 !important; background: rgba(14, 14, 24, .97) !important; } .van-picker { background: #12121e !important; } .van-picker__toolbar { background: #1a1a2c !important; } .van-picker__title { color: #eeeef3 !important; } .van-picker__confirm { color: #a78bfa !important; } .van-picker__cancel { color: #7e7e90 !important; } .van-picker-column__item { color: #4e4e60 !important; } .van-picker-column__item--selected { color: #eeeef3 !important; } .van-dialog { background: #12121e !important; border-radius: 24px !important; } .van-dialog__header { color: #eeeef3 !important; font-family: 'Playfair Display', Georgia, serif; } .van-dialog__message { color: #7e7e90 !important; } .van-dialog__confirm { color: #a78bfa !important; } .van-dialog__cancel { color: #7e7e90 !important; } .van-toast { background: rgba(14, 14, 24, .97) !important; color: #eeeef3 !important; } .van-search__content { background: rgba(14, 14, 24, .9) !important; border-radius: 14px !important; } .van-nav-bar { background: rgba(10, 10, 18, .88) !important; } .van-nav-bar__title { color: #eeeef3 !important; font-weight: 700 !important; } .van-nav-bar__left .van-icon, .van-nav-bar__right .van-icon { color: #a78bfa !important; } .van-tabbar { background: rgba(10, 10, 18, .94) !important; } .van-tab { color: #4e4e60 !important; } .van-tab--active { color: #a78bfa !important; } .van-tabs__line { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; } .van-tabs__nav { background: rgba(10, 10, 18, .94) !important; } .van-loading__text { color: #7e7e90 !important; } .van-empty__description { color: #4e4e60 !important; } .van-image-preview { background: rgba(0, 0, 0, .95) !important; } /* ============================================================ RESPONSIVE DESKTOP ============================================================ */ @media (min-width: 900px) { .login-mobile { padding: 0 !important; display: grid !important; grid-template-columns: 1fr minmax(380px, 420px) !important; min-height: 100vh; align-items: center !important; } .login-mobile > * { grid-column: 2 !important; } .login-hero { display: flex !important; flex-direction: column !important; align-items: flex-end !important; padding: 0 !important; max-width: none !important; } .login-hero h1 { font-size: 36px !important; } .login-hero p { font-size: 15px !important; } .login-card { max-width: none !important; margin: 0 !important; padding: 0 !important; } .login-card h2, .login-card-head h2 { font-size: 28px !important; } .login-footer, .register-footer, .forgot-footer { max-width: none !important; padding: 0 !important; } .lang-dropdown-wrapper { top: 24px; right: 24px; } .register-mobile { padding: clamp(32px, 5vh, 56px) clamp(48px, 8vw, 120px) 20px !important; } .forgot-mobile { padding: clamp(32px, 5vh, 56px) clamp(48px, 8vw, 120px) 20px !important; } .member-content { max-width: 900px !important; margin: 0 auto !important; } .member-tabbar { width: min(calc(100% - 48px), 900px) !important; } .discover-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 16px !important; } .photo-button { height: 260px !important; } .profile-shell { max-width: 900px !important; margin: 0 auto !important; } .hero-stats { grid-template-columns: repeat(4, 1fr) !important; max-width: 600px !important; margin: 0 auto !important; } .toolbar-grid { flex-wrap: wrap !important; justify-content: center !important; padding: 0 16px !important; } .message-list { padding: 0 16px !important; } .zone-shell { max-width: 900px !important; margin: 0 auto !important; } .zone-list { max-width: 900px !important; } .wallet-shell { max-width: 900px !important; margin: 0 auto !important; } .chat-body { max-width: 900px !important; margin: 0 auto !important; } .message-stack { max-width: 420px !important; } } @media (max-width: 360px) { .login-card { padding: 28px 20px !important; } .register-card { padding: 24px 16px !important; } .menu-list { grid-template-columns: repeat(2, 1fr) !important; } .toolbar-grid { padding: 0 8px !important; } .toolbar-pill { padding: 5px 10px !important; font-size: 11px !important; } .message-row { padding: 8px !important; } .avatar-image, .avatar-fallback { width: 34px !important; height: 34px !important; } .discover-card:nth-child(odd) .photo-button { height: 140px !important; } .discover-card:nth-child(even) .photo-button { height: 180px !important; } } /* ============================================================= * kk-dark-fixes.css — fix light-theme leakage on member pages * * Originally deployed for the deep-audit issues (Vant empty * panel + recharge-shell input). Expanded to cover the rest * of /recharge after the second xyue snapshot pass. * * Section index * 1. .van-empty — solid white empty-state card * 2. .recharge-shell input — amount input (dark green) * 3. .recharge-header — page title + intro paragraph * 4. .custom-input-wrap LABEL — was missed (no !important) * 5. mark.highlight-{blue,green,gold} — accent marks inside * plan copy were left at slate-900, unreadable on dark * 6. .plan-ticket / .plan-ribbon — badge text colors * 7. .back-button — Vant left-arrow icon * * Deployed as ?v=N — register in index.html. * v1: section 1-2 (van-empty + amount input) * v2: section 3-7 (header, label, marks, badges, back arrow) * v3: section 8-9 (.service-card SECTION + p.plan-copy) * v4: section 10-15 (global STRONG/H2/H3 + profile-edit radio + * home-display empty zones + zone-publish uploader * + zone-publish plain btn + about tabs) * v5: section 12b — real class names are .empty-photo-panel / * .empty-text-panel (not [class*="photo-zone"]) * v6: section 12c — tried .profile-edit-shell / .profile-password-shell; * selector miss (real shells are .page-shell.edit-shell / * .page-shell.password-shell) * v7: section 12c — corrected to .page-shell.edit-shell label and * .page-shell.password-shell label * ============================================================= */ /* ----- 1. Vant empty-state card (solid white panel) ----- * Hits /home, /wallet, /messages, /im. Default Vant * .van-empty { background: #fff; } * .van-empty__description p { color: #969799; } * inline gradient #F2F3F5 / #DCDFE6 / #C8C9CC * produces a glaring white card with grey-on-white copy on * the dark page. Make it transparent + on-palette. */ .van-empty, .van-empty__image, .van-empty__description, .van-empty__bottom { background: transparent !important; } .van-empty__description p { color: var(--kkdating-text, #eeeef3) !important; } .van-empty__bottom { color: var(--kkdating-text, #eeeef3); } .van-empty__image svg, .van-empty__image img { /* Default illustration is a light-gray Vant line drawing. * Invert + brighten, then drop opacity to ~50% so it becomes * a subtle white-on-dark icon. */ filter: invert(1) brightness(1.4); opacity: 0.5; } /* ----- 2. /recharge amount input ----- * The custom amount widget uses: * .recharge-shell color: rgb(43, 24, 48) dark purple * .custom-input-wrap color: rgb(23, 99, 69) dark green * .custom-input-wrap input color: rgb(16, 37, 29) very dark green * All unreadable on the #07070d page bg. Re-skin to the dark * theme text token. */ .recharge-shell { color: var(--kkdating-text, #eeeef3); } .recharge-shell .custom-input-wrap { color: var(--kkdating-text, #eeeef3); } .recharge-shell .custom-input-wrap input { color: var(--kkdating-text, #eeeef3) !important; -webkit-text-fill-color: var(--kkdating-text, #eeeef3); caret-color: var(--kkdating-primary, #a78bfa); } .recharge-shell .custom-input-wrap input::placeholder { color: rgba(238, 238, 243, 0.45); } /* ----- 3. /recharge header (title + intro) ----- * The and

inside .recharge-header inherit a * very dark purple from the build (rgb(36,17,43) / rgb(76,49,78)), * invisible on #07070d. The original comment said "plan-item / * highlight marks keep their own per-element colors" but the * title paragraph is not a plan item and must be themed. */ .recharge-shell .recharge-header strong, .recharge-shell .recharge-header p { color: var(--kkdating-text, #eeeef3) !important; } .recharge-shell .recharge-header p { color: rgba(238, 238, 243, 0.72) !important; } /* ----- 4. .custom-input-wrap as LABEL ----- * The custom amount LABEL

. Its inline * color (rgb(43, 24, 48), dark purple) is inherited by every * descendant that does not set its own color, making the * introductory copy unreadable on #07070d. Force the section * itself + any plain descendants to the theme text. */ .recharge-shell .service-card, .recharge-shell section.service-card { color: var(--kkdating-text, #eeeef3) !important; } /* ----- 9. p.plan-copy ----- * Each plan item has a

with body text * like "20 Gold coins + 3 首页图, no免费翻译。". The build * styles it rgb(61, 41, 62) — a muted purple — invisible on * the dark page. Lift it to the theme text colour. */ .recharge-shell p.plan-copy { color: rgba(238, 238, 243, 0.78) !important; } /* ----- 10. Global STRONG / H1 / H2 / H3 / H4 (page titles) ----- * Survey found the same slate-900 (rgb(17,24,39)) or warm * dark brown rgb(51,31,18) / rgb(27,20,15) leaking into * the page-level and

across every member * page: /home-display (首页展示, 基础信息, 国家 美国), * /profile/edit (修改信息), /profile/password (修改密码), * /zone/publish (发布动态), /about (H3 "关于我们"). * Lift all bare headings to the theme text colour. */ body strong, body h1, body h2, body h3, body h4 { color: var(--kkdating-text, #eeeef3) !important; } /* ----- 11. .van-radio__label--disabled ----- * /profile/edit renders the 男/女 radio labels with * .van-radio__label--disabled, which Vant styles rgb(17,24,39). * Override so the unselected radio label is readable. */ .van-radio__label--disabled, .van-radio--disabled .van-radio__label { color: var(--kkdating-text, #eeeef3) !important; } /* ----- 12. /home-display empty photo / bio zones ----- * Two glaring white boxes — "添加展示图" and "写一段自我 * 介绍" — sit on the dark page. Their wrappers are styled * white by the build. Make them translucent. */ .home-display-shell [class*="photo-zone"], .home-display-shell [class*="bio-zone"], .home-display-shell [class*="empty-zone"], .home-display-shell [class*="upload-zone"], .home-display-shell .van-uploader__upload, .home-display-shell .van-empty, .meet-display-shell [class*="photo-zone"], .meet-display-shell [class*="bio-zone"], .meet-display-shell [class*="empty-zone"], .meet-display-shell [class*="upload-zone"], .meet-display-shell .van-uploader__upload, .meet-display-shell .van-empty { background: rgba(255, 255, 255, 0.04) !important; color: var(--kkdating-text, #eeeef3) !important; border: 1px dashed rgba(167, 139, 250, 0.3) !important; } /* ----- 12b. .empty-photo-panel / .empty-text-panel ----- * /home-display and /meet-display render two "添加展示图" / * "写一段自我介绍" panels in near-white rgb(255,253,248) with * dark amber rgb(154,99,48) text — invisible on the dark page. * The [class*="photo-zone"] / [class*="bio-zone"] wildcards in * section 12 missed them (real class names are .empty-photo-panel / * .empty-text-panel). This targets the actual classes. */ .home-display-shell .empty-photo-panel, .home-display-shell .empty-text-panel, .meet-display-shell .empty-photo-panel, .meet-display-shell .empty-text-panel { background: rgba(255, 255, 255, 0.04) !important; color: var(--kkdating-text, #eeeef3) !important; border: 1px dashed rgba(167, 139, 250, 0.3) !important; } /* ----- 12c. bare