@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap";:root{--bg-app: #080710;--bg-sidebar: rgba(18, 16, 32, .6);--bg-content: rgba(10, 9, 21, .4);--glass-border: rgba(255, 255, 255, .08);--glass-border-hover: rgba(255, 255, 255, .15);--primary-glow: #8b5cf6;--primary-glow-hover: #a78bfa;--color-gold: #d4af37;--color-gold-hover: #b8972f;--color-success: #10b981;--color-error: #ef4444;--color-warning: #f59e0b;--text-primary: #f4f4f5;--text-muted: #a1a1aa}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Outfit,Inter,sans-serif;background-color:var(--bg-app);color:var(--text-primary);height:100vh;overflow:hidden;background-image:radial-gradient(circle at 10% 20%,rgba(139,92,246,.15) 0%,transparent 40%),radial-gradient(circle at 90% 80%,rgba(212,175,55,.08) 0%,transparent 45%)}.app-container{display:flex;width:100vw;height:100vh;overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.sidebar{width:280px;background:var(--bg-sidebar);border-right:1px solid var(--glass-border);display:flex;flex-direction:column;-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);z-index:10}.sidebar-header{padding:24px 20px;border-bottom:1px solid var(--glass-border)}.user-profile{display:flex;align-items:center;gap:12px}.user-avatar{width:48px;height:48px;border-radius:50%;background:#ffffff0d;border:2px solid var(--glass-border);padding:4px}.user-info{display:flex;flex-direction:column;gap:4px}.user-name{font-weight:600;font-size:.95rem;letter-spacing:.2px}.user-badge{font-size:.65rem;font-weight:800;padding:2px 8px;border-radius:9999px;width:fit-content;letter-spacing:.5px}.badge-free{background:#a1a1aa26;color:var(--text-muted);border:1px solid rgba(161,161,170,.3)}.badge-pro{background:#8b5cf633;color:#c084fc;border:1px solid rgba(139,92,246,.4);box-shadow:0 0 10px #8b5cf633}.badge-premium{background:#d4af3726;color:#fbbf24;border:1px solid rgba(212,175,55,.4);box-shadow:0 0 12px #d4af3740}.sidebar-nav{padding:20px 12px;display:flex;flex-direction:column;gap:8px;flex:1}.nav-item{background:transparent;border:none;color:var(--text-muted);text-align:left;padding:14px 16px;border-radius:12px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;border:1px solid transparent}.nav-item:hover{background:#ffffff0a;color:var(--text-primary);border-color:var(--glass-border)}.nav-item.active{background:#8b5cf626;color:#a78bfa;border-color:#8b5cf64d;box-shadow:inset 0 0 8px #8b5cf61a}.sidebar-footer{padding:20px;border-top:1px solid var(--glass-border);display:flex;flex-direction:column;gap:12px}.btn-connect{width:100%;padding:10px;border-radius:10px;background:linear-gradient(135deg,var(--primary-glow) 0%,#6d28d9 100%);color:#fff;border:none;font-weight:600;font-size:.85rem;cursor:pointer;transition:all .3s}.btn-connect:hover{transform:translateY(-1px);box-shadow:0 4px 12px #8b5cf666}.connected-status{font-size:.8rem;color:var(--color-success);text-align:center;font-weight:500}.env-badge{font-size:.7rem;color:var(--text-muted);text-align:center;background:#ffffff08;padding:4px 8px;border-radius:6px;border:1px solid var(--glass-border)}.main-content{flex:1;background:var(--bg-content);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);display:flex;flex-direction:column;overflow-y:auto}.content-header{padding:20px 32px;border-bottom:1px solid var(--glass-border);display:flex;justify-content:space-between;align-items:center;background:#0a091533}.content-header h2{font-size:1.3rem;font-weight:700}.header-actions{display:flex;gap:12px;align-items:center}.btn-share{background:linear-gradient(135deg,var(--color-gold) 0%,var(--color-gold-hover) 100%);color:#000;border:none;padding:10px 20px;border-radius:10px;font-weight:700;font-size:.85rem;cursor:pointer;transition:all .3s}.btn-share:hover{transform:translateY(-2px);box-shadow:0 4px 15px #d4af3766}.btn-stop{background:#ef444426;color:var(--color-error);border:1px solid rgba(239,68,68,.3);padding:10px 20px;border-radius:10px;font-weight:600;font-size:.85rem;cursor:pointer;transition:all .3s}.btn-stop:hover{background:#ef444440;border-color:#ef444480}.chat-section{display:flex;flex-direction:column;flex:1;height:100%}.chat-messages{flex:1;padding:32px;display:flex;flex-direction:column;gap:16px;overflow-y:auto}.message-bubble{background:#ffffff05;border:1px solid var(--glass-border);border-radius:16px;padding:16px 20px;max-width:70%;align-self:flex-start;box-shadow:0 4px 12px #0000001a}.message-meta{display:flex;justify-content:space-between;font-size:.75rem;color:var(--text-muted);margin-bottom:6px;gap:20px}.message-sender{font-weight:600;color:#c084fc}.message-text{font-size:.92rem;line-height:1.5}.chat-input-form{padding:20px 32px;border-top:1px solid var(--glass-border);display:flex;gap:12px;background:#08071080}.chat-input-form input{flex:1;background:#ffffff08;border:1px solid var(--glass-border);border-radius:12px;padding:14px 20px;color:#fff;font-family:inherit;font-size:.9rem;outline:none;transition:all .3s}.chat-input-form input:focus{border-color:var(--primary-glow);background:#ffffff0d}.chat-input-form button{background:var(--primary-glow);color:#fff;border:none;padding:0 24px;border-radius:12px;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .3s}.chat-input-form button:hover{background:var(--primary-glow-hover)}.workspace-section{display:flex;flex-direction:column;flex:1;height:100%}.control-panel-host{display:flex;align-items:center;gap:20px}.toggle-label{font-size:.85rem;color:var(--text-muted);display:flex;align-items:center;gap:8px;cursor:pointer}.control-panel-guest{display:flex;align-items:center;gap:16px}.btn-token{background:#8b5cf61a;color:#a78bfa;border:1px solid rgba(139,92,246,.3);padding:10px 20px;border-radius:10px;font-weight:600;font-size:.85rem;cursor:pointer;transition:all .3s}.btn-token:hover{background:#8b5cf633}.btn-token.holding{background:linear-gradient(135deg,var(--primary-glow) 0%,#6d28d9 100%);color:#fff;border:none;animation:glowPulse 2s infinite}@keyframes glowPulse{0%{box-shadow:0 0 #8b5cf666}70%{box-shadow:0 0 0 10px #8b5cf600}to{box-shadow:0 0 #8b5cf600}}.control-locked-badge{font-size:.8rem;color:var(--text-muted);background:#ffffff08;padding:6px 12px;border-radius:8px;border:1px solid var(--glass-border)}.screen-viewer-container{flex:1;display:flex;align-items:center;justify-content:center;padding:24px;background:#040308;overflow:auto;position:relative}.screen-frame-wrapper{position:relative;max-width:100%;max-height:100%;box-shadow:0 20px 50px #000c;border-radius:12px;overflow:hidden;border:1px solid var(--glass-border)}.shared-screen-img{display:block;max-width:100%;max-height:80vh;object-fit:contain;cursor:crosshair}.screen-placeholder{text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px;color:var(--text-muted)}.loader{border:4px solid rgba(255,255,255,.05);border-top:4px solid var(--primary-glow);border-radius:50%;width:50px;height:50px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.virtual-cursor{position:absolute;pointer-events:none;z-index:1000;transition:all .1s ease;display:flex;flex-direction:column;align-items:flex-start}.virtual-cursor svg{filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}.cursor-label{color:#fff;font-size:.65rem;font-weight:700;padding:2px 6px;border-radius:4px;margin-top:4px;margin-left:10px;box-shadow:0 4px 8px #0000004d;white-space:nowrap}.pricing-section{padding:40px 32px;display:flex;flex-direction:column;gap:32px;align-items:center;max-width:1000px;margin:0 auto;width:100%}.pricing-cards-container{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;width:100%}.pricing-card{background:#ffffff05;border:1px solid var(--glass-border);border-radius:24px;padding:32px 24px;display:flex;flex-direction:column;align-items:center;transition:all .3s ease;position:relative;overflow:hidden}.pricing-card:hover{transform:translateY(-5px);border-color:var(--glass-border-hover);background:#ffffff0a}.pricing-card.active-card{border-color:var(--primary-glow);background:#8b5cf60d;box-shadow:0 10px 30px #8b5cf626}.pro-card.active-card{box-shadow:0 15px 35px #8b5cf633}.premium-card.active-card{border-color:var(--color-gold);background:#d4af370a;box-shadow:0 15px 35px #d4af3726}.popular-tag{position:absolute;top:15px;right:-30px;background:var(--color-gold);color:#000;font-size:.6rem;font-weight:800;padding:4px 30px;transform:rotate(45deg);letter-spacing:.5px}.pricing-card h3{font-size:1.1rem;font-weight:700;margin-bottom:16px;color:var(--text-muted)}.pro-card h3{color:#c084fc}.premium-card h3{color:#fcd34d}.price{font-size:1.8rem;font-weight:800;margin-bottom:24px;display:flex;align-items:baseline}.price span{font-size:.8rem;font-weight:400;color:var(--text-muted);margin-left:4px}.pricing-card ul{list-style:none;display:flex;flex-direction:column;gap:12px;width:100%;margin-bottom:32px;flex:1}.pricing-card li{font-size:.85rem;color:var(--text-muted);display:flex;gap:8px}.btn-tier-action{width:100%;padding:12px;border-radius:12px;border:none;font-weight:700;font-size:.85rem;cursor:pointer;transition:all .3s}.btn-tier-action:disabled{background:#ffffff0d;color:var(--text-muted);border:1px solid var(--glass-border);cursor:not-allowed}.btn-buy-pro{background:linear-gradient(135deg,var(--primary-glow) 0%,#6d28d9 100%);color:#fff}.btn-buy-pro:hover{box-shadow:0 4px 15px #8b5cf666;transform:translateY(-1px)}.btn-buy-premium{background:linear-gradient(135deg,var(--color-gold) 0%,var(--color-gold-hover) 100%);color:#000}.btn-buy-premium:hover{box-shadow:0 4px 15px #d4af3766;transform:translateY(-1px)}.payment-instructions-card{width:100%;background:#ffffff03;border:1px solid var(--glass-border);border-radius:24px;padding:32px}.payment-instructions-card h4{font-size:1.1rem;font-weight:700;margin-bottom:24px;color:#a78bfa}.payment-info-flex{display:flex;gap:32px;align-items:center}.qr-code-placeholder{display:flex;flex-direction:column;align-items:center;gap:12px}.qr-box{width:150px;height:150px;background:#fff;border-radius:12px;padding:8px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;box-shadow:0 10px 25px #00000080}.qr-text{color:#000;font-weight:800;font-size:1.2rem;letter-spacing:1px}.qr-scanner-line{position:absolute;left:0;right:0;height:2px;background:var(--color-error);animation:scanLine 2s linear infinite}@keyframes scanLine{0%{top:0}50%{top:150px}to{top:0}}.qr-tip{font-size:.75rem;color:var(--text-muted)}.transfer-details{flex:1;display:flex;flex-direction:column;gap:16px}.detail-row{display:flex;justify-content:space-between;border-bottom:1px dashed var(--glass-border);padding-bottom:10px}.detail-row .label{color:var(--text-muted);font-size:.9rem}.detail-row .value{font-weight:600;font-size:.92rem}.highlight-memo{color:#fbbf24;background:#fbbf241a;padding:2px 10px;border-radius:6px;border:1px solid rgba(251,191,36,.2);font-family:monospace;font-weight:800!important;font-size:1.05rem!important}.payment-warning{font-size:.8rem;color:var(--text-muted);line-height:1.6;margin-top:10px}.landing-section{padding:48px 32px;display:flex;flex-direction:column;gap:40px;max-width:1000px;margin:0 auto;width:100%}.landing-hero{text-align:center;background:linear-gradient(135deg,#8b5cf608,#09090b66);border:1px solid var(--glass-border);border-radius:24px;padding:60px 40px;display:flex;flex-direction:column;align-items:center;gap:20px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.hero-badge{background:#8b5cf626;color:#a78bfa;font-size:.72rem;font-weight:800;padding:6px 16px;border-radius:9999px;border:1px solid rgba(139,92,246,.3);letter-spacing:1px;text-transform:uppercase}.landing-hero h1{font-size:2.5rem;font-weight:800;background:linear-gradient(135deg,#fff,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1.2}.landing-hero p{font-size:1.05rem;color:var(--text-muted);max-width:700px;line-height:1.6}.hero-actions{display:flex;gap:16px;margin-top:10px}.btn-hero-primary{background:linear-gradient(135deg,var(--primary-glow) 0%,#6d28d9 100%);color:#fff;text-decoration:none;padding:14px 28px;border-radius:12px;font-weight:700;font-size:.95rem;box-shadow:0 8px 25px #8b5cf64d;transition:all .3s}.btn-hero-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px #8b5cf680}.btn-hero-secondary{background:#ffffff0a;color:#fff;border:1px solid var(--glass-border);padding:14px 28px;border-radius:12px;font-weight:600;font-size:.95rem;cursor:pointer;transition:all .3s}.btn-hero-secondary:hover{background:#ffffff14;border-color:var(--glass-border-hover)}.landing-features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;width:100%}.feature-card{background:#ffffff03;border:1px solid var(--glass-border);border-radius:20px;padding:32px 24px;transition:all .3s;text-align:left}.feature-card:hover{transform:translateY(-3px);background:#ffffff08;border-color:var(--glass-border-hover)}.feature-icon{font-size:2rem;margin-bottom:16px}.feature-card h3{font-size:1.15rem;font-weight:700;margin-bottom:8px}.feature-card p{font-size:.88rem;color:var(--text-muted);line-height:1.5}.annotation-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:50}.control-panel-host{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.active-operator-info{display:flex;align-items:center;gap:8px;background:#10b9811a;border:1px solid rgba(16,185,129,.2);padding:6px 12px;border-radius:8px;font-size:.82rem;color:#34d399}.btn-revoke-host{background:#ef4444;color:#fff;border:none;padding:4px 10px;border-radius:6px;font-size:.75rem;font-weight:600;cursor:pointer;transition:background .2s}.btn-revoke-host:hover{background:#dc2626}.host-queue-panel{display:flex;align-items:center;gap:10px;background:#ffffff05;border:1px dashed var(--glass-border);padding:4px 12px;border-radius:8px;font-size:.8rem}.queue-title{color:#a78bfa;font-weight:600}.queue-item{display:flex;align-items:center;gap:6px;background:#ffffff0a;padding:2px 8px;border-radius:6px;border:1px solid var(--glass-border)}.btn-grant{background:#8b5cf6;color:#fff;border:none;padding:2px 6px;border-radius:4px;font-size:.7rem;font-weight:600;cursor:pointer;transition:background .2s}.btn-grant:hover{background:#7c3aed}.btn-token.waiting{background:#f59e0b1a!important;color:#fbbf24!important;border:1px solid rgba(245,158,11,.3)!important}.connected-status-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.btn-logout-sidebar{background:#ef44441a;color:#f87171;border:1px solid rgba(239,68,68,.2);padding:6px 12px;border-radius:8px;font-size:.8rem;font-weight:600;cursor:pointer;width:100%;transition:all .2s}.btn-logout-sidebar:hover{background:#ef444433;border-color:#ef444466}
