:root { --bg-dark:#050508; --bg-card:rgba(18,18,24,0.75); --web10x-red:#e62429; --whatsapp-green:#25D366; }
* { margin:0; padding:0; box-sizing:border-box; } body { background:var(--bg-dark); color:#f3f4f6; font-family:'Inter',sans-serif; min-height:100vh; overflow-x:hidden; }
.cinematic-splash { position:fixed; top:0; left:0; width:100vw; height:100vh; background:#050508; z-index:99999; display:flex; flex-direction:column; align-items:center; justify-content:center; transition:opacity 0.6s ease; }
.cinematic-splash.fade-out { opacity:0; pointer-events:none; } .splash-core { position:relative; width:160px; height:160px; display:flex; align-items:center; justify-content:center; margin-bottom:24px; }
.cyber-ring { position:absolute; border-radius:50%; border:2px solid transparent; } .ring-1 { width:100%; height:100%; border-top-color:var(--web10x-red); animation:spinRight 1.5s linear infinite; } .ring-2 { width:75%; height:75%; border-bottom-color:var(--whatsapp-green); animation:spinLeft 1.2s linear infinite; }
@keyframes spinRight { to { transform:rotate(360deg); } } @keyframes spinLeft { to { transform:rotate(-360deg); } }
.splash-logo { font-family:'Space Grotesk'; font-size:32px; font-weight:700; z-index:2; } .splash-bar-wrap { width:220px; height:4px; background:rgba(255,255,255,0.1); border-radius:4px; overflow:hidden; margin:12px auto; }
.splash-bar { width:100%; height:100%; background:linear-gradient(90deg,var(--web10x-red),var(--whatsapp-green)); animation:fillBar 0.75s forwards; } @keyframes fillBar { 0%{width:0%} 100%{width:100%} }
.ai-canvas { position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:-1; pointer-events:none; opacity:0.55; } .ambient-glow { position:fixed; width:450px; height:450px; border-radius:50%; filter:blur(140px); z-index:-2; opacity:0.25; } .glow-red { top:-100px; left:-100px; background:var(--web10x-red); } .glow-green { bottom:-100px; right:-100px; background:var(--whatsapp-green); }
.app-container { max-width:1250px; margin:0 auto; padding:24px; opacity:0; transition:opacity 0.5s ease; } .app-container.loaded { opacity:1; }
.glass-card { background:var(--bg-card); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,0.08); border-radius:18px; box-shadow:0 16px 40px rgba(0,0,0,0.5); }
.main-header { display:flex; justify-content:space-between; align-items:center; padding:20px 24px; margin-bottom:24px; } .default-logo { font-family:'Space Grotesk'; font-size:28px; font-weight:700; color:#fff; } .default-logo span { color:var(--web10x-red); }
.role-badge { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,0.05); padding:6px 14px; border-radius:20px; font-size:12px; } .pulse-dot { width:8px; height:8px; background:var(--whatsapp-green); border-radius:50%; box-shadow:0 0 10px var(--whatsapp-green); }
.info-banner { display:flex; align-items:center; gap:16px; padding:20px 24px; margin-bottom:28px; background:linear-gradient(135deg,rgba(37,211,102,0.08),rgba(20,20,26,0.8)); border-left:4px solid var(--whatsapp-green); }
button { cursor:pointer; font-family:'Inter'; font-weight:500; font-size:13px; border:none; border-radius:10px; padding:10px 18px; transition:0.2s; display:inline-flex; align-items:center; gap:6px; }
.btn-primary { background:linear-gradient(135deg,var(--whatsapp-green),#1da851); color:#fff; font-weight:600; } .btn-secondary { background:rgba(255,255,255,0.06); color:#fff; border:1px solid rgba(255,255,255,0.1); } .btn-danger { background:rgba(230,36,41,0.15); color:#ff5c60; border:1px solid rgba(230,36,41,0.3); }
.sessions-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:20px; } .session-card { padding:22px; min-height:220px; display:flex; flex-direction:column; justify-content:space-between; }
.status-working { border-color:rgba(37,211,102,0.4); } .status-pill { font-size:11px; font-weight:600; padding:4px 10px; border-radius:20px; } .status-working .status-pill { background:rgba(37,211,102,0.15); color:var(--whatsapp-green); } .status-stopped .status-pill { background:rgba(255,255,255,0.08); color:#9ca3af; }
.modal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.85); backdrop-filter:blur(8px); z-index:1000; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:0.2s; } .modal-overlay.active { opacity:1; pointer-events:all; }
.modal-content { width:100%; max-width:480px; padding:28px; } .qr-display-box { background:#fff; border-radius:14px; padding:20px; display:flex; flex-direction:column; align-items:center; min-height:260px; margin-bottom:16px; } .qr-display-box img { max-width:220px; }
.timer-badge { background:rgba(37,211,102,0.15); color:var(--whatsapp-green); padding:4px 14px; border-radius:20px; font-size:12px; font-weight:600; } .btn-close { background:transparent; color:#9ca3af; font-size:22px; }
.spinner { width:36px; height:36px; border:3px solid rgba(255,255,255,0.1); border-radius:50%; border-top-color:var(--whatsapp-green); animation:spin 1s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } }