*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#fff;--surface:#f5f5f7;--surface2:#ebebee;--surface3:#e0e0e5;--border:#00000014;--border-h:#00000024;--accent:#00c9a7;--accent2:#7c3aed;--text:#1a1a2e;--muted:#7a7d96;--red:#ff2d55;--orange:#ff9500;--green:#34c759;--font-body:"DM Sans", system-ui, sans-serif;--font-head:"Syne", system-ui, sans-serif;--font-mono:"Azeret Mono", "SF Mono", monospace;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px}body{font-family:var(--font-body);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}body:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(600px 400px at 20% 10%,#7c3aed08,#0000),radial-gradient(500px 500px at 80% 80%,#00c9a708,#0000);position:fixed;inset:0}body:after{content:"";pointer-events:none;z-index:0;background-image:repeating-linear-gradient(0deg,#0000,#0000 40px,#00000004 40px 41px),repeating-linear-gradient(90deg,#0000,#0000 40px,#00000004 40px 41px);position:fixed;inset:0}#root{z-index:1;position:relative}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#0000001f;border-radius:4px}@keyframes fadein{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}@keyframes ripple{0%{opacity:.8;transform:scale(.8)}to{opacity:0;transform:scale(2.6)}}@keyframes glow{0%,to{box-shadow:0 0 8px var(--accent)}50%{box-shadow:0 0 20px var(--accent), 0 0 40px #00e5c326}}@keyframes slideUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes scanline{0%{top:-10%}to{top:110%}}.host-layout{justify-content:center;align-items:center;gap:80px;width:100vw;height:100vh;padding:40px;display:flex}.phone-center{flex-direction:column;align-items:center;gap:16px;animation:.6s fadein;display:flex}.phone-center:nth-child(2){animation-delay:.15s}.phone-frame{background:#0a0a14;border:3px solid #2a2a3e;border-radius:40px;justify-content:center;align-items:center;width:400px;height:840px;transition:all .4s;display:flex;position:relative;overflow:hidden;box-shadow:0 0 0 1px #0000000f,0 30px 80px #0000002e,0 10px 30px #0000001f,inset 0 0 30px #0000004d}.phone-frame.live{border-color:#00c9a759;box-shadow:0 0 0 1px #00c9a71a,0 0 60px #00c9a714,0 30px 80px #0000002e,0 10px 30px #0000001f}.phone-notch{z-index:10;background:#050510;border-radius:0 0 16px 16px;width:100px;height:22px;position:absolute;top:8px;left:50%;transform:translate(-50%)}.phone-notch:after{content:"";background:#1a1a2e;border-radius:50%;width:8px;height:8px;position:absolute;top:8px;left:50%;transform:translate(-50%)}.phone-frame video{object-fit:cover;border-radius:37px;width:100%;height:100%;display:block}.phone-frame.live:after{content:"";pointer-events:none;z-index:5;background:linear-gradient(90deg,#0000,#00e5c30f,#0000);height:2px;animation:8s linear infinite scanline;position:absolute;left:0;right:0}.video-placeholder{color:var(--muted);flex-direction:column;align-items:center;gap:16px;padding:20px;animation:.6s fadein;display:flex}.video-placeholder .placeholder-icon{border:2px dashed var(--border-h);opacity:.5;border-radius:16px;justify-content:center;align-items:center;width:70px;height:70px;font-size:30px;display:flex;position:relative}.video-placeholder .placeholder-icon:after{content:"";border:1px dashed var(--border);border-radius:20px;animation:3s ease-in-out infinite pulse;position:absolute;inset:-6px}.video-placeholder .placeholder-title{color:var(--text);text-align:center;font-size:14px;font-weight:500}.video-placeholder .placeholder-sub{font-size:11px;font-family:var(--font-mono);letter-spacing:.04em;text-align:center}.video-overlay{pointer-events:none;z-index:4;background:linear-gradient(#06070fb3 0%,#0000 20% 80%,#06070fd9 100%);border-radius:37px;flex-direction:column;justify-content:space-between;padding:36px 14px 14px;display:flex;position:absolute;inset:0}.video-overlay .overlay-top{justify-content:space-between;align-items:center;display:flex}.video-overlay .overlay-bottom{align-items:center;gap:12px;display:flex}.connection-info{justify-content:space-between;align-items:center;width:100%;padding:0 4px;display:flex}.code-mini{align-items:center;gap:10px;display:flex}.code-mini .label{margin:0;font-size:9px}.code-value{font-family:var(--font-head);letter-spacing:.12em;color:var(--accent);text-shadow:0 0 20px #00c9a733;font-size:28px;font-weight:800}.code-url-mini{text-align:center;width:100%;font-family:var(--font-mono);color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;padding:10px;font-size:11px;transition:all .25s}.code-url-mini:hover{color:var(--accent);background:#00c9a70f;border-color:#00c9a740}.logo{font-family:var(--font-head);letter-spacing:-.03em;color:var(--text);font-size:19px;font-weight:800}.logo .dot{color:var(--accent)}.badge{font-size:11px;font-family:var(--font-mono);letter-spacing:.06em;border-radius:100px;align-items:center;gap:7px;padding:5px 14px;font-weight:500;transition:all .3s;display:inline-flex}.badge-green{color:var(--accent);background:#00e5c314;border:1px solid #00e5c333}.badge-gray{background:var(--surface2);color:var(--muted);border:1px solid var(--border)}.badge-red{color:var(--red);background:#ff2d5514;border:1px solid #ff2d5533}.badge-orange{color:var(--orange);background:#ff950014;border:1px solid #ff950033}.status-dot{border-radius:50%;width:7px;height:7px;display:inline-block}.status-dot.green{background:var(--accent);box-shadow:0 0 8px var(--accent);animation:1.8s ease-in-out infinite pulse}.status-dot.gray{background:var(--muted)}.status-dot.red{background:var(--red);box-shadow:0 0 8px var(--red)}.status-dot.orange{background:var(--orange);animation:1s ease-in-out infinite pulse}.label{font-size:10px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:10px;font-weight:500}.input{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);width:100%;color:var(--text);font-family:var(--font-body);outline:none;padding:14px 18px;font-size:14px;transition:all .25s}.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #00e5c314}.input::placeholder{color:var(--muted)}.btn{border-radius:var(--radius-md);font-family:var(--font-body);cursor:pointer;letter-spacing:.02em;border:none;align-items:center;gap:8px;padding:11px 22px;font-size:13px;font-weight:500;transition:all .25s;display:inline-flex}.btn-primary{background:var(--accent);color:#000}.btn-primary:hover{filter:brightness(1.15);transform:translateY(-1px);box-shadow:0 8px 24px #00e5c333}.btn-secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{border-color:var(--accent);color:var(--accent);background:#00e5c30a}.btn-red{color:var(--red);background:#ff2d551a;border:1px solid #ff2d5533}.btn-red:hover{background:#ff2d5533}.btn:disabled{opacity:.5;cursor:not-allowed}.copy-toast{background:var(--text);color:#fff;font-family:var(--font-mono);z-index:1000;pointer-events:none;border:1px solid #00c9a74d;border-radius:100px;padding:10px 20px;font-size:12px;transition:transform .3s;position:fixed;bottom:24px;left:50%;transform:translate(-50%)translateY(100px);box-shadow:0 8px 30px #00000026}.copy-toast.show{transform:translate(-50%)translateY(0)}.client-layout{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.client-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);width:100%;max-width:380px;padding:36px;animation:.5s fadeInScale;position:relative;overflow:hidden}.client-card:before{content:"";background:var(--accent);opacity:.03;filter:blur(60px);pointer-events:none;border-radius:50%;width:240px;height:240px;position:absolute;top:-50px;left:50%;transform:translate(-50%)}.share-btn-wrap{flex-direction:column;align-items:center;gap:18px;display:flex}.share-btn{border:2px solid var(--accent);cursor:pointer;background:#00e5c30f;border-radius:50%;justify-content:center;align-items:center;width:86px;height:86px;font-size:34px;transition:all .3s;display:flex;position:relative}.share-btn:hover{background:#00e5c324;transform:scale(1.06);box-shadow:0 0 30px #00e5c326}.share-btn:after{content:"";border:2px solid var(--accent);opacity:.5;border-radius:50%;animation:2.4s ease-out infinite ripple;position:absolute;inset:-6px}.share-btn.active{border-color:var(--red);background:#ff2d551a}.share-btn.active:after{display:none}.share-btn.active:hover{background:#ff2d552e}.share-status{color:var(--muted);font-size:13px;font-family:var(--font-mono);transition:color .3s}.share-status.ok{color:var(--accent)}.divider{background:var(--border);height:1px;margin:22px 0}.code-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;position:relative;overflow:hidden}.code-box:before{content:"";background:var(--accent);opacity:.04;filter:blur(40px);pointer-events:none;border-radius:50%;width:120px;height:120px;position:absolute;top:-20px;right:-20px}.code-number{font-family:var(--font-head);letter-spacing:.16em;color:var(--accent);text-shadow:0 0 30px #00c9a733;margin-bottom:10px;font-size:46px;font-weight:800}@media (width<=900px){.host-layout{flex-direction:column;gap:48px;height:auto;min-height:100vh;padding:40px 20px}.phone-frame{width:280px;height:590px}}