@charset "UTF-8";
:root { --bg-base:#0f172a; --bg-card:#1e293b; --bg-chat:#0b1120; --text-main:#f8fafc; --text-muted:#94a3b8; --border:#334155; --accent:#f43f5e; --accent-hover:#e11d48; --accent-glow:rgba(244,63,94,0.4); --success:#10b981; --danger:#ef4444; --gold:#fbbf24; --male:#3b82f6; --female:#ec4899; --couple:#8b5cf6; --msg-in:#1e293b; --msg-out:#f43f5e; --msg-text-in:#f8fafc; --msg-text-out:#ffffff; --shadow:0 10px 30px rgba(0,0,0,0.3); --glass-bg:rgba(30,41,59,0.85); }
body:not(.dark) { --bg-base:#f8fafc; --bg-card:#ffffff; --bg-chat:#f1f5f9; --text-main:#0f172a; --text-muted:#64748b; --border:#e2e8f0; --msg-in:#ffffff; --msg-text-in:#0f172a; --glass-bg:rgba(255,255,255,0.85); --shadow:0 4px 15px rgba(0,0,0,0.05); }
* { box-sizing:border-box; margin:0; padding:0; outline:none; -webkit-tap-highlight-color:transparent; }
body { background:var(--bg-base); color:var(--text-main); font-family:'Inter',sans-serif; transition:0.3s; overflow-x:hidden; }
[lang="ar"] body { font-family:'Cairo',sans-serif; }
::-webkit-scrollbar { width:6px; } ::-webkit-scrollbar-track { background:transparent; } ::-webkit-scrollbar-thumb { background:var(--border); border-radius:10px; }
@keyframes popIn { 0% { opacity:0; transform:scale(0.9); } 100% { opacity:1; transform:scale(1); } }
@keyframes pulse { 0% { transform:scale(1); } 50% { transform:scale(1.05); } 100% { transform:scale(1); } }
.pulse-animation { animation:pulse 2s infinite; } .text-center { text-align:center; }
.landing-body { background:radial-gradient(circle at top right, var(--bg-card), var(--bg-base)); }
.landing-nav { display:flex; justify-content:space-between; align-items:center; padding:20px 5%; background:var(--glass-bg); backdrop-filter:blur(20px); position:sticky; top:0; z-index:1000; border-bottom:1px solid var(--border); }
.nav-brand { font-size:1.8rem; font-weight:900; color:var(--text-main); letter-spacing:-1px; } .nav-brand span { color:var(--accent); }
.nav-controls { display:flex; gap:15px; align-items:center; }
.lang-pill, .theme-btn { background:var(--bg-base); color:var(--text-main); border:1px solid var(--border); border-radius:20px; font-weight:600; cursor:pointer; }
.lang-pill { padding:8px 15px; } .theme-btn { width:40px; height:40px; border-radius:50%; font-size:1.2rem; display:flex; align-items:center; justify-content:center; }
.hero-container { max-width:1200px; margin:0 auto; padding:60px 20px; min-height:85vh; display:flex; align-items:center; }
.hero-content { display:grid; grid-template-columns:1fr 450px; gap:60px; width:100%; align-items:center; }
.hero-text-side h1 { font-size:clamp(2.5rem, 5vw, 4.5rem); font-weight:900; margin-bottom:25px; line-height:1.2; color:var(--text-main); }
.hero-text-side h1 span { background:linear-gradient(135deg, var(--accent), var(--gold)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.hero-sub { font-size:1.2rem; color:var(--text-muted); margin-bottom:40px; line-height:1.6; max-width:500px; }
.hero-badges { display:flex; gap:15px; flex-wrap:wrap; } .hero-badges span { background:var(--bg-base); padding:8px 16px; border-radius:20px; font-size:0.9rem; font-weight:bold; border:1px solid var(--border); color:var(--text-main); }
.login-card { background:var(--glass-bg); backdrop-filter:blur(25px); border:1px solid var(--border); border-radius:35px; padding:40px; box-shadow:var(--shadow); }
.login-card h2 { margin-bottom:25px; color:var(--text-main); font-weight:900; font-size:1.8rem; }
.input-group { margin-bottom:20px; text-align:start; } .input-group label { display:block; margin-bottom:8px; font-weight:600; color:var(--text-muted); font-size:0.9rem; }
.input-st { width:100%; padding:15px; background:var(--bg-base); border:1px solid var(--border); border-radius:14px; color:var(--text-main); font-size:1rem; transition:0.3s; }
.input-st:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(244,63,94,0.2); }
.form-row { display:flex; gap:15px; }
.gender-cards { display:flex; gap:10px; margin-top:10px; }
.g-card { flex:1; padding:15px 5px; text-align:center; background:var(--bg-base); border:2px solid var(--border); border-radius:16px; cursor:pointer; transition:0.3s; color:var(--text-main); }
.g-card .icon { display:block; font-size:1.8rem; margin-bottom:5px; } .g-card .text { font-size:0.85rem; font-weight:700; opacity:0.7; }
.g-card.active { border-color:var(--accent); background:rgba(244,63,94,0.1); transform:translateY(-3px); } .g-card.active .text { opacity:1; }
.btn-primary-glow { width:100%; padding:18px; background:linear-gradient(135deg, #f43f5e, #e11d48); color:white!important; border:none; border-radius:16px; font-size:1.2rem; font-weight:900; cursor:pointer; box-shadow:0 10px 25px var(--accent-glow); transition:0.3s; margin-top:15px; display:inline-flex; align-items:center; justify-content:center; gap:10px; }
.btn-primary-glow:hover { transform:translateY(-3px) scale(1.02); box-shadow:0 15px 35px var(--accent-glow); }
.section-heading { text-align:center; font-size:2.2rem; font-weight:900; margin-bottom:40px; color:var(--text-main); }
.seo-features { max-width:1200px; margin:0 auto; padding:60px 20px; } .seo-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:30px; }
.seo-card { background:var(--bg-card); padding:35px; border-radius:24px; border:1px solid var(--border); text-align:center; transition:0.3s; box-shadow:var(--shadow); }
.seo-card:hover { transform:translateY(-10px); border-color:var(--accent); } .feature-icon { font-size:3rem; margin-bottom:20px; }
.seo-card h3 { font-size:1.4rem; color:var(--text-main); margin-bottom:15px; font-weight:800; } .seo-card p { color:var(--text-muted); line-height:1.6; }
.main-footer { background:var(--bg-card); padding:60px 20px 30px; border-top:1px solid var(--border); } .footer-content { max-width:1200px; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:30px; margin-bottom:40px; }
.footer-brand h2 { color:var(--text-main); font-size:1.8rem; margin-bottom:10px; font-weight:900;} .footer-brand span { color:var(--accent); }
.footer-links { display:flex; gap:20px; } .footer-links a { color:var(--text-muted); text-decoration:none; font-weight:600; transition:0.2s; } .footer-links a:hover { color:var(--accent); }
.footer-bottom { border-top:1px solid var(--border); padding-top:20px; text-align:center; font-size:0.9rem; color:var(--text-muted); }
.chat-body { height:100dvh; overflow:hidden; display:flex; flex-direction:column; background:var(--bg-base); }
.app-container { display:flex; flex-direction:column; flex:1; overflow:hidden; }
.top-bar { height:75px; background:var(--bg-card); border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; padding:0 25px; flex-shrink:0; z-index:20; }
.brand-area { display:flex; align-items:center; gap:20px; } .nav-brand-chat { font-size:1.5rem; font-weight:900; color:var(--text-main); letter-spacing:-0.5px; } .nav-brand-chat span { color:var(--accent); }
.my-profile-badge { display:flex; align-items:center; background:var(--bg-base); border:1px solid var(--border); padding:4px 15px 4px 4px; border-radius:30px; gap:10px; box-shadow:0 2px 10px rgba(0,0,0,0.05); }
#my-own-mood { width:34px; height:34px; border-radius:50%; background:var(--bg-card); display:flex; align-items:center; justify-content:center; font-size:1.2rem; cursor:pointer; transition:0.2s; border:1px solid var(--border); color:var(--text-main); }
#my-own-mood:hover { transform:scale(1.1); border-color:var(--accent); } .my-name-text { font-weight:800; font-size:1rem; color:var(--text-main); max-width:120px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.top-controls { display:flex; align-items:center; gap:10px; } .points-badge { font-weight:800; font-size:0.95rem; background:rgba(251,191,36,0.1); border:1px solid rgba(251,191,36,0.3); color:var(--gold); padding:6px 15px; border-radius:20px; }
.control-select { background:var(--bg-base); border:1px solid var(--border); color:var(--text-main); padding:8px 12px; border-radius:12px; font-weight:700; cursor:pointer; }
.control-btn { background:var(--bg-base); border:1px solid var(--border); width:40px; height:40px; border-radius:12px; font-size:1.2rem; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:0.2s; color:var(--text-main); } .control-btn:hover { background:var(--border); }
.btn-danger-text { background:rgba(239,68,68,0.1); color:var(--danger); border-color:rgba(239,68,68,0.3); font-weight:800; width:auto; padding:0 15px; font-size:0.95rem; gap:5px; } .btn-danger-text:hover { background:var(--danger); color:white!important; }
#lang-selector-chat { display:none!important; }
.main-content { display:flex; flex:1; overflow:hidden; position:relative; max-width:1600px; margin:0 auto; width:100%; }
.sidebar { width:340px; min-width:340px; background:var(--bg-card); border-inline-end:1px solid var(--border); display:flex; flex-direction:column; z-index:10; }
.sidebar-header { padding:20px 25px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--border); background:var(--bg-base); }
.sidebar-title { font-weight:900; font-size:0.8rem; color:var(--text-muted); letter-spacing:1px; } .online-count-badge { background:var(--accent); color:white; padding:3px 10px; border-radius:12px; font-size:0.75rem; font-weight:bold; }
.visitors-list { flex:1; overflow-y:auto; padding:15px; }
.visitor-card { display:flex; align-items:center; padding:12px; border-radius:18px; margin-bottom:10px; cursor:pointer; transition:0.2s; border:1px solid var(--border); background:var(--bg-base); }
.visitor-card:hover { background:var(--bg-chat); border-color:var(--accent); } .visitor-card.active { background:var(--bg-chat); border-color:var(--accent); box-shadow:var(--shadow); }
.visitor-card.card-bg-Male.active { border-inline-start:4px solid var(--male); } .visitor-card.card-bg-Female.active { border-inline-start:4px solid var(--female); } .visitor-card.card-bg-Couple.active { border-inline-start:4px solid var(--couple); }
.avatar-wrap { position:relative; margin-inline-end:15px; } .avatar { width:55px; height:55px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:1.4rem; color:white; box-shadow:0 4px 10px rgba(0,0,0,0.1); flex-shrink:0; }
.card-bg-Male .avatar { background:linear-gradient(135deg, #3b82f6, #2563eb); } .card-bg-Female .avatar { background:linear-gradient(135deg, #ec4899, #db2777); } .card-bg-Couple .avatar { background:linear-gradient(135deg, #8b5cf6, #7c3aed); }
.unread-badge { position:absolute; top:-5px; right:-5px; background:var(--danger); color:white; border-radius:50%; width:22px; height:22px; display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:bold; border:2px solid var(--bg-card); }
.info-wrap { flex:1; min-width:0; } .name-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; } .name-text { font-weight:800; font-size:1.05rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:5px; color:var(--text-main); }
.user-mood-pill { font-size:0.9rem; } .rank-badge { font-size:0.7rem; padding:3px 8px; border-radius:8px; background:rgba(244,63,94,0.1); color:var(--accent); font-weight:800; white-space:nowrap; } .meta-row { font-size:0.8rem; color:var(--text-muted); font-weight:500; }
.chat-area { flex:1; display:flex; flex-direction:column; background:var(--bg-chat); position:relative; min-width:0; }
.chat-bg-Female { background:linear-gradient(180deg, var(--bg-chat) 0%, rgba(236,72,153,0.03) 100%); } .chat-bg-Male { background:linear-gradient(180deg, var(--bg-chat) 0%, rgba(59,130,246,0.03) 100%); } .chat-bg-Couple { background:linear-gradient(180deg, var(--bg-chat) 0%, rgba(139,92,246,0.03) 100%); }
.placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--text-muted); } .placeholder-icon { font-size:5rem; opacity:0.1; margin-bottom:20px; } .placeholder h2 { font-weight:800; font-size:1.5rem; opacity:0.5; }
.chat-header { padding:12px 25px; background:var(--glass-bg); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; gap:15px; z-index:5; flex-wrap:nowrap!important; height:75px; flex-shrink:0; }
.chat-user-info { display:flex; align-items:center; gap:15px; flex:1; min-width:0; cursor:pointer; padding:5px; border-radius:12px; transition:0.2s; } .chat-user-info:hover { background:var(--bg-base); }
#chat-avatar { width:45px; height:45px; font-size:1.2rem; } .chat-user-meta { display:flex; flex-direction:column; min-width:0; justify-content:center; } .chat-name-row { font-weight:900; font-size:1.15rem; display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text-main); }
.chat-status-row { font-size:0.85rem; color:var(--text-muted); font-weight:600; margin-top:2px; display:flex; align-items:center; gap:5px; }
.chat-actions { display:flex; gap:10px; align-items:center; flex-shrink:0; }
.chat-action-btn { background:var(--bg-base); border:1px solid var(--border); width:44px; height:44px; border-radius:14px; font-size:1.2rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:0.2s; color:var(--text-main); flex-shrink:0; }
.chat-action-btn:hover { background:var(--border); transform:translateY(-2px); box-shadow:0 5px 15px rgba(0,0,0,0.1); }
.separator { width:1px; height:25px; background:var(--border); margin:0 5px; }
.btn-danger-icon { color:var(--danger); background:rgba(239,68,68,0.1); border-color:rgba(239,68,68,0.2); } .btn-danger-icon:hover { background:var(--danger); color:white!important; }
.locked-feature { opacity:0.5!important; cursor:not-allowed!important; filter:grayscale(60%); } .locked-feature::after { content:'🔒'; position:absolute; bottom:-6px; right:-6px; font-size:0.85rem; background:var(--bg-card); border-radius:50%; padding:4px; border:1px solid var(--border); box-shadow:0 4px 10px rgba(0,0,0,0.2); color:var(--text-main); }
.messages { flex:1; padding:25px; overflow-y:auto; display:flex; flex-direction:column; gap:18px; min-height:0; }
.msg { max-width:70%; padding:14px 20px; border-radius:22px; font-size:1.05rem; line-height:1.5; position:relative; word-wrap:break-word; box-shadow:0 2px 5px rgba(0,0,0,0.05); animation:popIn 0.3s forwards; flex-shrink:0; font-weight:500; }
.msg-in { align-self:flex-start; background:var(--msg-in); color:var(--msg-text-in); border-end-start-radius:4px; border:1px solid var(--border); }
.msg-out { align-self:flex-end; background:linear-gradient(135deg, var(--accent), #e11d48); color:var(--msg-text-out); border-end-end-radius:4px; border:none; box-shadow:0 5px 15px rgba(244,63,94,0.2); }
.msg-time { display:block; font-size:0.75rem; opacity:0.7; margin-top:6px; text-align:end; font-weight:normal; }
.msg-reaction { position:absolute; bottom:-12px; right:15px; background:var(--bg-card); border:1px solid var(--border); border-radius:20px; padding:3px 8px; font-size:0.95rem; box-shadow:0 4px 10px rgba(0,0,0,0.2); animation:popIn 0.2s ease; z-index:2; color:var(--text-main); } .msg-in .msg-reaction { right:auto; left:15px; }
.react-hover-menu { display:none; position:absolute; top:-35px; left:50%; transform:translateX(-50%); background:var(--bg-card); border:1px solid var(--border); border-radius:25px; padding:6px 12px; box-shadow:0 10px 25px rgba(0,0,0,0.1); z-index:10; gap:10px; } .msg:hover .react-hover-menu { display:flex; } .react-hover-menu span { cursor:pointer; transition:0.2s; font-size:1.2rem; } .react-hover-menu span:hover { transform:scale(1.4) translateY(-2px); }
.msg-photo { max-width:320px!important; border-radius:22px; overflow:hidden; background:transparent!important; padding:0!important; box-shadow:0 10px 25px rgba(0,0,0,0.1)!important; margin:10px 0; border:1px solid var(--border); } .msg-photo img { display:block; width:100%; height:auto; max-height:400px; min-height:150px; object-fit:cover; border-radius:22px; cursor:pointer; transition:0.3s; } .msg-photo .msg-time { position:absolute; bottom:12px; right:15px; background:rgba(0,0,0,0.6); backdrop-filter:blur(5px); color:white; padding:4px 12px; border-radius:12px; margin:0!important; }
.ad-message { align-self:center; width:90%; max-width:500px; background:var(--bg-card); border:1px solid var(--border); border-radius:22px; padding:18px; margin:20px 0; display:flex; gap:18px; align-items:center; cursor:pointer; box-shadow:var(--shadow); position:relative; overflow:hidden; transition:0.3s; flex-shrink:0; } .ad-message:hover { transform:translateY(-3px); border-color:var(--gold); } .ad-tag { position:absolute; top:0; inset-inline-start:0; background:var(--gold); color:black; font-size:0.7rem; font-weight:900; padding:4px 12px; border-end-end-radius:12px; } .ad-img { width:75px; height:75px; border-radius:16px; object-fit:cover; box-shadow:0 4px 15px rgba(0,0,0,0.1); } .ad-title { font-weight:900; color:var(--text-main); font-size:1.1rem; margin-bottom:5px; }
.input-wrap { padding:15px 25px; background:var(--glass-bg); backdrop-filter:blur(20px); border-top:1px solid var(--border); position:relative; z-index:10; flex-shrink:0; }
.input-bar { display:flex; gap:12px; align-items:center; background:var(--bg-card); padding:8px 10px 8px 15px; border-radius:30px; border:1px solid var(--border); max-width:1000px; margin:0 auto; box-shadow:inset 0 2px 5px rgba(0,0,0,0.05); }
.attach-wrapper { position:relative; } .input-action-btn { background:var(--bg-base); border:1px solid var(--border); font-size:1.3rem; cursor:pointer; border-radius:12px; transition:0.2s; display:flex; align-items:center; justify-content:center; width:40px; height:40px; color:var(--text-muted);} .input-action-btn:hover { background:var(--border); transform:translateY(-2px); color:var(--accent); }
.attach-menu { display:none; position:absolute; bottom:55px; inset-inline-start:-5px; background:var(--bg-card); border:1px solid var(--border); border-radius:18px; box-shadow:0 15px 40px rgba(0,0,0,0.2); flex-direction:column; min-width:240px; z-index:100; overflow:hidden; padding:8px; animation:popIn 0.2s ease; }
.attach-menu.show { display:flex!important; }
.menu-item { background:transparent; border:none; width:100%; text-align:start; padding:12px 15px; font-size:1rem; font-weight:600; color:var(--text-main); cursor:pointer; border-radius:12px; transition:0.2s; display:flex; align-items:center; gap:10px; } .menu-item:hover { background:var(--bg-base); color:var(--accent); } .menu-item.spicy { color:#f43f5e; } .menu-divider { height:1px; background:var(--border); margin:5px 10px; }
.msg-input-field { flex:1; border:none; background:transparent; padding:10px; font-size:1.05rem; color:var(--text-main); outline:none; min-width:0; } .msg-input-field::placeholder { color:var(--text-muted); }
.btn-send { background:linear-gradient(135deg, var(--accent), #e11d48); color:white; border:none; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1.2rem; transition:0.2s; box-shadow:0 4px 15px var(--accent-glow); flex-shrink:0; margin-inline-start:auto; padding-inline-start:4px;} .btn-send:hover { transform:scale(1.05) rotate(-10deg); box-shadow:0 6px 20px var(--accent-glow); } .btn-send:active { transform:scale(0.95); }
.scroll-bottom { position:absolute; bottom:100px; right:25px; width:45px; height:45px; background:var(--bg-card); border:1px solid var(--border); border-radius:50%; display:none; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 10px 25px rgba(0,0,0,0.1); z-index:10; font-size:1.2rem; font-weight:bold; transition:0.2s; color:var(--text-main); } .scroll-bottom:hover { background:var(--bg-base); transform:translateY(-3px); }
.bottom-nav { display:none; height:70px; background:var(--glass-bg); backdrop-filter:blur(20px); border-top:1px solid var(--border); flex-shrink:0; z-index:100; padding-bottom:env(safe-area-inset-bottom); } .nav-item { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--text-muted); cursor:pointer; position:relative; transition:0.3s; padding-top:5px; } .nav-icon { font-size:1.5rem; margin-bottom:4px; transition:0.3s; } .nav-text { font-size:0.75rem; font-weight:700; transition:0.3s; } .nav-item.active { color:var(--accent); } .nav-item.active .nav-icon { transform:translateY(-3px) scale(1.1); } .nav-badge { position:absolute; top:5px; right:25%; background:var(--danger); color:white; font-size:0.65rem; font-weight:900; padding:2px 7px; border-radius:12px; display:none; border:2px solid var(--bg-card); }
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.85); backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; z-index:99999; padding:20px; } .modal-box { background:var(--bg-card); border-radius:28px; width:100%; max-width:420px; position:relative; box-shadow:0 30px 60px rgba(0,0,0,0.2); border:1px solid var(--border); animation:popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); padding:35px 25px; } .modal-close-btn { position:absolute; top:15px; right:15px; background:var(--bg-base); border:1px solid var(--border); width:35px; height:35px; border-radius:50%; font-size:1.5rem; cursor:pointer; color:var(--text-muted); transition:0.2s; display:flex; align-items:center; justify-content:center; z-index:10; } .modal-close-btn:hover { background:var(--danger); color:white; border-color:var(--danger); } .modal-title { margin-bottom:15px; color:var(--text-main); font-size:1.5rem; font-weight:900; } .modal-subtext { color:var(--text-muted); line-height:1.6; font-size:1rem; margin-bottom:25px; font-weight:500; } .modal-huge-icon { font-size:4rem; margin-bottom:15px; filter:drop-shadow(0 4px 10px rgba(0,0,0,0.1)); } .modal-btn-row { display:flex; gap:12px; } .modal-btn-row-col { display:flex; flex-direction:column; gap:12px; }
.profile-modal-box { padding:0; overflow:hidden; max-width:360px; } .prof-cover-bg { height:130px; background:linear-gradient(135deg, var(--accent), #fbbf24); } .prof-content { padding:25px; text-align:center; } .prof-avatar-wrap { margin-top:-75px; display:flex; justify-content:center; margin-bottom:15px; } .prof-big-avatar { width:105px; height:105px; font-size:3.5rem; border:6px solid var(--bg-card); box-shadow:0 10px 25px rgba(0,0,0,0.1); } .prof-name-title { font-weight:900; font-size:1.6rem; color:var(--text-main); margin-bottom:5px; } .prof-loc-text { color:var(--text-muted); font-size:1rem; margin-bottom:25px; font-weight:500; } .prof-stats-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-bottom:25px; } .stat-box { background:var(--bg-base); padding:15px 5px; border-radius:18px; border:1px solid var(--border); } .stat-box .icon { font-size:1.5rem; margin-bottom:5px; } .stat-box strong { font-size:1.2rem; color:var(--text-main); } .prof-actions-row { display:flex; gap:12px; } .prof-chat-btn { flex:1; margin:0; padding:15px; font-size:1.1rem; } .prof-icon-btn { background:var(--bg-base); border:2px solid var(--border); color:var(--text-main); width:55px; border-radius:16px; font-size:1.3rem; cursor:pointer; transition:0.2s; } .prof-icon-btn:hover { background:var(--bg-card); border-color:var(--accent); color:var(--accent); }
.btn-block { width:100%; padding:16px; border-radius:16px; font-size:1.1rem; font-weight:800; cursor:pointer; border:none; transition:0.2s; color:white; } .btn-success-bg { background:var(--success); box-shadow:0 8px 20px rgba(16, 185, 129, 0.3); } .btn-danger-bg { background:var(--danger); box-shadow:0 8px 20px rgba(239, 68, 68, 0.3); } .btn-outline { background:transparent; border:2px solid var(--border); color:var(--text-main); width:100%; padding:16px; border-radius:16px; font-size:1.1rem; font-weight:800; cursor:pointer; transition:0.2s; } .btn-outline:hover { background:var(--bg-base); border-color:var(--accent); color:var(--accent); }
.call-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.95); z-index:9999999; display:none; align-items:center; justify-content:center; backdrop-filter:blur(15px); } .call-container { position:relative; width:100%; height:100%; max-width:1200px; display:flex; align-items:center; justify-content:center; } #remote-video { width:100%; height:100%; object-fit:cover; border-radius:20px; box-shadow:0 20px 60px rgba(0,0,0,0.6); } #local-video { position:absolute; bottom:130px; right:25px; width:110px; height:150px; object-fit:cover; border-radius:18px; border:3px solid var(--accent); background:#1e293b; box-shadow:0 15px 30px rgba(0,0,0,0.5); z-index:10; } .call-controls-bar { position:absolute; bottom:45px; left:50%; transform:translateX(-50%); display:flex; gap:20px; background:rgba(255,255,255,0.1); padding:15px 35px; border-radius:40px; backdrop-filter:blur(20px); z-index:100; border:1px solid rgba(255,255,255,0.2); } .call-action-btn { width:55px; height:55px; border-radius:50%; border:none; font-size:1.5rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:0.3s; background:rgba(255,255,255,0.2); color:white; border:1px solid rgba(255,255,255,0.3); } .call-action-btn:hover { background:rgba(255,255,255,0.3); transform:scale(1.1); } .end-call { background:var(--danger); box-shadow:0 10px 25px rgba(239, 68, 68, 0.5); border:none; } .end-call:hover { background:#dc2626; } .call-status-badge { position:absolute; top:40px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.6); padding:12px 30px; border-radius:25px; color:white; font-weight:800; z-index:10; font-size:1.1rem; border:1px solid rgba(255,255,255,0.1); backdrop-filter:blur(10px); }
.offline-overlay { display:none; position:fixed; inset:0; background:rgba(15,23,42,0.98); z-index:100000; flex-direction:column; align-items:center; justify-content:center; color:white; backdrop-filter:blur(15px); text-align:center; padding:20px; } .offline-icon { font-size:6rem; margin-bottom:25px; filter:drop-shadow(0 0 30px var(--accent)); animation:pulse 2s infinite; } .btn-retry { padding:18px 45px; background:linear-gradient(135deg, var(--accent), #e11d48); color:white; border:none; border-radius:20px; font-weight:900; font-size:1.2rem; cursor:pointer; box-shadow:0 10px 30px var(--accent-glow); transition:0.3s; margin-top:20px; } .btn-retry:hover { transform:scale(1.05); box-shadow:0 15px 40px var(--accent-glow); }
#toast-container { position:fixed; top:25px; right:25px; z-index:999999; display:flex; flex-direction:column; gap:12px; pointer-events:none; } .toast { background:var(--glass-bg); backdrop-filter:blur(10px); color:var(--text-main); padding:15px 25px; border-radius:16px; box-shadow:0 10px 25px rgba(0,0,0,0.1); border-inline-start:4px solid var(--accent); display:flex; align-items:center; gap:12px; font-weight:700; font-size:1rem; animation:slideInRight 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); border:1px solid var(--border); } @keyframes slideInRight { from { transform:translateX(120%); opacity:0; } to { transform:translateX(0); opacity:1; } }
#heart-rain-container { position:fixed; inset:0; pointer-events:none; z-index:100000; display:none; background:rgba(0,0,0,0.7); backdrop-filter:blur(5px); } .neon-heart { position:absolute; bottom:-10%; animation:floatUp linear forwards; filter:drop-shadow(0 0 15px rgba(244,63,94,0.8)); } @keyframes floatUp { 0% { transform:translateY(0) rotate(0deg); opacity:1; } 100% { transform:translateY(-120vh) rotate(360deg); opacity:0; } } .match-overlay-text { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); color:white; font-size:3rem; font-weight:900; text-align:center; text-shadow:0 10px 30px rgba(244,63,94,0.8); animation:popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
#smart-reconnect-banner { position:fixed; top:-100px; left:50%; transform:translateX(-50%); background:#f59e0b; color:white; padding:14px 35px; border-radius:0 0 25px 25px; font-weight:800; font-size:1.05rem; box-shadow:0 15px 40px rgba(0,0,0,0.2); z-index:9999999; transition:0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); display:flex; align-items:center; gap:12px; border:1px solid rgba(255,255,255,0.1); border-top:none; } #smart-reconnect-banner.show { top:0; } #smart-reconnect-banner.success { background:var(--success); box-shadow:0 15px 40px rgba(16,185,129,0.2); } .spinner-icon { animation:spin 1.5s linear infinite; display:inline-block; font-size:1.2rem; } @keyframes spin { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } }
#game-wheel-container { display:none; flex-direction:column; align-items:center; padding:25px; background:radial-gradient(circle, var(--bg-card) 0%, var(--bg-base) 100%); border-bottom:2px solid var(--accent); position:relative; flex-shrink:0; box-shadow:0 10px 20px rgba(0,0,0,0.05); } .wheel-wrapper { position:relative; width:220px; height:220px; margin:25px 0; cursor:grab; user-select:none; } .wheel-wrapper:active { cursor:grabbing; } #wheel-canvas { width:100%; height:100%; border-radius:50%; border:6px solid var(--gold); box-shadow:0 0 20px rgba(251, 191, 36, 0.2); transition:transform 4s cubic-bezier(0.15, 0, 0.15, 1); } .wheel-pointer { position:absolute; top:-15px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:18px solid transparent; border-right:18px solid transparent; border-top:35px solid var(--accent); z-index:5; filter:drop-shadow(0 4px 8px rgba(0,0,0,0.2)); }
@media (max-width:950px) { .hero-content { grid-template-columns:1fr; text-align:center; gap:30px; padding-top:10px; } .hero-text-side p { margin:0 auto 30px; } .hero-badges { justify-content:center; } .login-card { margin:0 auto; width:100%; max-width:100%; padding:30px 20px; box-sizing:border-box; } }
@media (max-width:850px) { .top-controls .control-btn:not(#desktop-exit) { display:none; } #desktop-exit span { display:none; } .brand-area { gap:10px; } .bottom-nav { display:flex; } .main-content { position:relative; } .sidebar { position:absolute; inset:0; width:100%; min-width:100%; border:none; z-index:10; background:var(--bg-base); } .chat-area { position:absolute; inset:0; width:100%; z-index:10; display:none; } body.view-visitors .sidebar { display:flex; } body.view-visitors .chat-area { display:none!important; } body.view-chat .sidebar { display:none!important; } body.view-chat .chat-area { display:flex!important; } .msg { max-width:85%; padding:12px 16px; font-size:1rem; border-radius:18px; } .msg-photo { max-width:80%!important; margin:8px 0; border-radius:18px; } .msg-photo img { border-radius:18px; } .input-wrap { padding:10px 15px; } .input-bar { padding:6px 8px 6px 12px; border-radius:25px; gap:8px; } .msg-input-field { font-size:1rem; padding:8px; } .btn-send { width:40px; height:40px; font-size:1.1rem; } .input-action-btn { width:35px; height:35px; font-size:1.3rem; } .attach-menu { inset-inline-start:-5px; bottom:45px; min-width:220px; } .chat-header { padding:10px 15px; gap:10px; height:65px; } #chat-avatar { width:40px; height:40px; font-size:1.1rem; } .chat-name-row { font-size:1.05rem; } .chat-status-row { font-size:0.75rem; } .chat-actions { gap:5px; } .chat-action-btn { width:36px; height:36px; font-size:1.05rem; } .separator { height:20px; margin:0 2px; } #local-video { bottom:140px; right:15px; width:100px; height:140px; border-width:2px; } .scroll-bottom { bottom:90px; right:15px; width:40px; height:40px; font-size:1.1rem; } }
@media (max-width:450px) { .form-row[style] { flex-direction:column!important; gap:15px!important; } .hero-text-side h1 { font-size:2.2rem; } }