:root{--bg: #060817;--card: rgba(16, 20, 42, .82);--border: rgba(255, 255, 255, .12);--text: #f7f8ff;--muted: #9ca6c8;--primary: #7c5cff;--primary-2: #5f8cff;--secondary: rgba(255, 255, 255, .1);--danger: #ff4d6d;--success: #39d98a;--shadow: 0 24px 80px rgba(0, 0, 0, .45);--radius-xl: 32px;--radius-lg: 24px;--radius-md: 18px;--radius-sm: 14px;--ease: cubic-bezier(.16, 1, .3, 1)}*{box-sizing:border-box;margin:0;padding:0}html{min-height:100%;scroll-behavior:smooth}body{margin:0;min-height:100%;font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden}button,input{font:inherit}button{cursor:pointer;background:none;border:none;color:inherit}a{color:inherit;text-decoration:none}.app-bg{position:relative;min-height:100vh;overflow:hidden;background:radial-gradient(circle at 18% 18%,rgba(123,114,255,.18),transparent 28%),radial-gradient(circle at 82% 14%,rgba(106,169,255,.13),transparent 30%),radial-gradient(circle at 50% 92%,rgba(116,214,164,.08),transparent 36%),linear-gradient(145deg,#060816 0%,#0a1020 48%,#070914 100%)}.app-bg:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:54px 54px;-webkit-mask-image:radial-gradient(circle at center,black 0%,transparent 72%);mask-image:radial-gradient(circle at center,black 0%,transparent 72%);opacity:.34}.app-bg:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(circle at center,transparent 0%,rgba(0,0,0,.2) 68%,rgba(0,0,0,.48) 100%)}.stars{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.24;background-image:radial-gradient(circle,rgba(255,255,255,.72) 1px,transparent 1px),radial-gradient(circle,rgba(255,255,255,.38) 1px,transparent 1px);background-size:96px 96px,148px 148px;background-position:0 0,44px 66px;animation:starsDrift 32s linear infinite}@keyframes starsDrift{to{background-position:96px 96px,140px 140px}}.orbit{position:absolute;border:1px solid rgba(255,255,255,.055);border-radius:50%;pointer-events:none}.orbit:before{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:rgba(123,114,255,.46);box-shadow:0 0 18px #7b72ff38}.orbit-one{width:620px;height:620px;left:-220px;top:82px;animation:slowRotate 52s linear infinite}.orbit-one:before{top:110px;right:90px}.orbit-two{width:850px;height:850px;right:-370px;top:-190px;animation:slowRotateReverse 68s linear infinite}.orbit-two:before{bottom:190px;left:112px;background:rgba(106,169,255,.4)}.orbit-three{width:520px;height:520px;right:16%;bottom:-320px;animation:slowRotate 76s linear infinite}.orbit-three:before{top:80px;left:90px;background:rgba(116,214,164,.34)}@keyframes slowRotate{to{transform:rotate(360deg)}}@keyframes slowRotateReverse{to{transform:rotate(-360deg)}}.header{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:26px 48px;animation:gc-header-in .62s var(--ease) both}@keyframes gc-header-in{0%{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}.logo{display:inline-flex;gap:12px;align-items:center;border:0;background:transparent;color:var(--text);font-size:22px;font-weight:800;letter-spacing:-.03em}.logo-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:13px;background:linear-gradient(145deg,rgba(255,255,255,.18),transparent),linear-gradient(135deg,#746cff,#5c89f2);box-shadow:inset 0 1px #ffffff3d,0 14px 32px #5b62ff38}.header-actions,.hero-actions,.room-actions,.status-actions{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap}.main{position:relative;z-index:4;min-height:calc(100vh - 92px);display:grid;place-items:center;padding:30px 22px 70px}.screen{display:none;width:100%}.screen.active{display:grid;place-items:center;animation:gc-screen-in .52s var(--ease) both}@keyframes gc-screen-in{0%{opacity:0;transform:translateY(18px) scale(.985);filter:blur(8px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}.hero{width:min(920px,100%);text-align:center}.badge,.label{display:inline-flex;width:max-content;max-width:100%;align-items:center;gap:8px;color:#dee3ffd6;background:rgba(123,114,255,.105);border:1px solid rgba(123,114,255,.18);border-radius:999px;padding:8px 14px;font-size:14px;margin-bottom:18px;box-shadow:inset 0 1px #ffffff12}.badge:before,.label:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 10px #74d6a459}.hero h1{margin:0;font-size:clamp(42px,7vw,86px);line-height:.98;letter-spacing:-.065em}.hero h1 span{display:block;color:#c1cbffe6}.hero p{width:min(650px,100%);margin:28px auto 34px;color:var(--muted);font-size:18px;line-height:1.75}.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 20px;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);background:linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.045)),rgba(255,255,255,.045);font-weight:700;letter-spacing:-.01em;-webkit-user-select:none;user-select:none;box-shadow:inset 0 1px #ffffff1c,0 12px 28px #00000029;transition:transform .22s var(--ease),border-color .22s var(--ease),background .22s var(--ease),box-shadow .22s var(--ease)}.btn:hover{transform:translateY(-1.5px);border-color:#ffffff2e}.btn:active{transform:translateY(0) scale(.985)}.btn:focus-visible{outline:none;box-shadow:0 0 0 4px #7b72ff26,0 0 0 1px #7b72ff6b}.btn-primary{min-height:54px;padding:0 26px;border-color:#7b72ff5c;background:linear-gradient(135deg,#9b6cff 0%,#6d5dfc 46%,#3b82f6 100%);color:#fff;box-shadow:0 18px 40px #6366f15c,inset 0 1px #ffffff42}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 24px 52px #6366f175,inset 0 1px #ffffff52}.btn-primary:active{transform:translateY(0) scale(.985);box-shadow:0 14px 28px #6366f152}.btn-secondary{min-height:54px;padding:0 24px;color:#eef2ff;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.065));border:1px solid rgba(255,255,255,.16);box-shadow:0 12px 28px #0003,inset 0 1px #ffffff29}.btn-secondary:hover{transform:translateY(-2px);border-color:#c4b5fd57;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.08))}.btn-ghost{min-height:46px;color:#e8ecffc2;background:transparent;border-color:transparent;box-shadow:none}.btn-ghost:hover{color:#fff;background:rgba(255,255,255,.075);transform:translateY(-1px)}.btn-danger{min-height:54px;background:linear-gradient(135deg,#fb7185,#ef4444 48%,#b91c1c);color:#fff;box-shadow:0 18px 40px #ef444447,inset 0 1px #ffffff38}.btn-danger:hover{transform:translateY(-2px);box-shadow:0 24px 52px #ef44445c}.btn-large{min-height:58px;padding:0 30px;border-radius:18px;font-size:17px}.btn-full{width:100%}.card,.status-card{width:min(460px,100%);position:relative;overflow:hidden;border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035)),rgba(17,22,43,.72);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-radius:var(--radius-xl);padding:34px;box-shadow:var(--shadow)}.card>*,.status-card>*{position:relative;z-index:1}.auth-card h2,.status-card h2,.room-card h2,.setup-card h2{margin:0 0 10px;font-size:34px;letter-spacing:-.045em}.auth-card p,.status-card p,.room-card p,.setup-card p{margin:0 0 26px;color:var(--muted);line-height:1.65}.form{display:grid;gap:16px}.form label{display:grid;gap:8px;color:#f5f7ffd1;font-size:14px}.form input{width:100%;height:52px;border-radius:16px;border:1px solid var(--border);outline:none;background:rgba(255,255,255,.055);color:var(--text);padding:0 16px;box-shadow:0 10px 24px #0000001f;transition:border-color .2s var(--ease),background .2s var(--ease)}.form input::placeholder{color:#d5dcff5c}.form input:hover{border-color:#ffffff2e;background:rgba(255,255,255,.09)}.form input:focus{border-color:#7b72ff7a;background:rgba(255,255,255,.075);box-shadow:0 0 0 4px #7b72ff1c}.link-btn{display:block;margin:20px auto 0;border:0;background:transparent;color:#c1cbffc2;text-align:center;transition:color .2s var(--ease)}.link-btn:hover{color:#fff}.status-card{text-align:center}.loader{width:58px;height:58px;margin:0 auto 24px;border-radius:50%;border:4px solid rgba(255,255,255,.11);border-top-color:#7b72ffe6;animation:spin .85s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.status-icon{display:grid;place-items:center;width:68px;height:68px;margin:0 auto 22px;border-radius:22px;background:rgba(57,217,138,.14);color:var(--success);font-size:34px;font-weight:900;box-shadow:0 18px 48px #6366f129}.status-icon.error{background:rgba(239,93,115,.14);color:var(--danger)}.status-icon.success{background:rgba(57,217,138,.14);color:var(--success)}.room-card{width:min(920px,100%)}.room-top{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}.room-code{flex:0 0 auto;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid var(--border);color:#e6eaffeb;font-weight:800;letter-spacing:.08em}.invite-box{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:8px 0 24px;padding:12px;border-radius:20px;background:rgba(255,255,255,.045);border:1px solid var(--border);color:var(--muted);overflow:hidden;transition:border-color .2s ease,background .2s ease}.invite-box:hover{border-color:#c4b5fd3d;background:rgba(255,255,255,.07)}.invite-box span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.preview-grid,.call-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.video-tile{position:relative;min-height:230px;display:grid;place-items:center;border-radius:26px;background:radial-gradient(circle at 50% 34%,rgba(123,114,255,.14),transparent 34%),linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.032)),rgba(255,255,255,.035);border:1px solid var(--border);overflow:hidden;box-shadow:0 16px 40px #0000002e;transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease}.video-tile:hover{transform:translateY(-3px);border-color:#c4b5fd47;box-shadow:0 30px 90px #00000075}.video-tile.waiting{color:var(--muted)}.avatar{display:grid;place-items:center;width:74px;height:74px;border-radius:50%;background:linear-gradient(145deg,rgba(255,255,255,.18),transparent),linear-gradient(135deg,rgba(123,114,255,.95),rgba(92,137,242,.92));color:#fff;font-weight:900;box-shadow:0 22px 58px #6366f15c}.avatar.big{width:100px;height:100px;font-size:24px}.avatar.guest{background:linear-gradient(145deg,rgba(255,255,255,.18),transparent),linear-gradient(135deg,rgba(116,214,164,.88),rgba(106,169,255,.88))}.tile-name{position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(5,7,17,.46);border:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#e9ecffe6;font-size:14px}.tile-name:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 10px #74d6a452}.pulse-dot{width:18px;height:18px;border-radius:50%;background:rgba(106,169,255,.78);box-shadow:0 0 #6aa9ff57;animation:pulse 1.6s infinite}@keyframes pulse{to{box-shadow:0 0 0 18px #6aa9ff00}}.room-actions{margin-top:24px}.setup-card{text-align:center}.video-preview{display:grid;place-items:center;gap:14px;min-height:250px;border-radius:26px;background:radial-gradient(circle at 50% 36%,rgba(123,114,255,.13),transparent 36%),rgba(255,255,255,.045);border:1px solid var(--border);color:var(--muted);margin-bottom:18px}.setup-controls,.call-controls{display:flex;justify-content:center;gap:12px;margin:20px 0}.call-controls{position:relative;width:max-content;max-width:100%;margin:22px auto 0;padding:12px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035)),rgba(7,10,22,.78);border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);box-shadow:inset 0 1px #ffffff17,0 18px 48px #00000057;animation:gc-control-in .68s .14s var(--ease) both}@keyframes gc-control-in{0%{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.call-btn{position:relative;display:grid;place-items:center;width:54px;height:54px;border:1px solid rgba(255,255,255,.105);border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.095),rgba(255,255,255,.035)),rgba(255,255,255,.045);color:#f5f7ffe6;font-size:19px;line-height:1;box-shadow:inset 0 1px #ffffff1a,0 10px 24px #0000002e;transition:transform .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease),color .2s var(--ease)}.call-btn:hover{transform:translateY(-2px);border-color:#ffffff2b;background:linear-gradient(180deg,rgba(255,255,255,.125),rgba(255,255,255,.045)),rgba(255,255,255,.06);box-shadow:inset 0 1px #ffffff21,0 14px 30px #00000038}.call-btn:active{transform:translateY(0) scale(.94)}.call-btn:focus-visible{outline:none;box-shadow:0 0 0 4px #7b72ff21,0 0 0 1px #7b72ff61}.call-btn.active{border-color:#74d6a43d;background:linear-gradient(180deg,rgba(116,214,164,.16),rgba(116,214,164,.055)),rgba(255,255,255,.045);color:#eafff2}.call-btn.off{border-color:#ef5d7347;background:linear-gradient(180deg,rgba(239,93,115,.16),rgba(239,93,115,.055)),rgba(255,255,255,.04);color:#ffe6ea}.call-btn.danger{width:58px;height:58px;border-color:#ef5d7357;background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.035)),linear-gradient(135deg,rgba(239,93,115,.96),rgba(214,68,91,.96));color:#fff;box-shadow:inset 0 1px #fff3,0 14px 34px #ef5d7338}.call-btn.danger:hover{border-color:#ffffff40;box-shadow:inset 0 1px #ffffff38,0 18px 42px #ef5d7347}.call-layout{width:min(1180px,100%)}.call-header{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:18px}.call-header h2{margin:0;font-size:32px}.call-timer{padding:12px 16px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid var(--border);color:#dfe4ff;font-weight:800}.call-tile{min-height:min(56vh,520px)}.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%) translateY(20px);z-index:10;opacity:0;pointer-events:none;padding:12px 16px;border-radius:999px;background:rgba(20,25,55,.95);border:1px solid var(--border);color:var(--text);transition:.2s ease}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}.ripple{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.25);transform:scale(0);animation:rippleEffect .65s ease-out}@keyframes rippleEffect{to{transform:scale(2.45);opacity:0}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}@media (max-width: 760px){.header{padding:20px;flex-wrap:wrap}.header-actions{gap:8px}.header-actions .btn{padding:0 12px;min-height:38px;font-size:13px}.card,.status-card{padding:24px;border-radius:24px}.room-top,.invite-box,.call-header{flex-direction:column}.preview-grid,.call-grid{grid-template-columns:1fr}.call-tile{min-height:260px}.hero-actions{flex-direction:column}.hero-actions .btn{width:100%}.main{padding-top:16px}.btn,.btn-primary,.btn-secondary,.btn-danger{width:100%;min-height:52px;padding:0 20px;border-radius:15px}.btn-ghost{width:auto}.call-btn{width:50px;height:50px;font-size:17px}.call-btn.danger{width:54px;height:54px}.call-controls{padding:10px;gap:10px;border-radius:28px}}@media (max-width: 480px){.logo span:last-child{display:none}.header-actions .btn-ghost{display:none}.hero p{font-size:16px}.auth-card h2,.status-card h2,.room-card h2,.setup-card h2{font-size:28px}}
