@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";:root{--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--bg-app: 210 40% 98%;--bg-card: 0 0% 100%;--fg-main: 220 20% 12%;--fg-muted: 220 10% 45%;--primary: 180 100% 30%;--primary-hover: 180 100% 25%;--primary-light: 180 100% 96%;--secondary: 195 90% 45%;--secondary-light: 195 90% 96%;--border: 220 15% 90%;--border-focus: 180 100% 35%;--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .05);--shadow-md: 0 8px 30px rgba(0, 0, 0, .04);--shadow-lg: 0 20px 40px rgba(0, 0, 0, .08);--radius-sm: 8px;--radius-md: 14px;--radius-lg: 20px;--radius-full: 9999px}@media(prefers-color-scheme:dark){:root{--bg-app: 220 20% 8%;--bg-card: 220 20% 12%;--fg-main: 210 20% 90%;--fg-muted: 220 10% 60%;--primary: 180 80% 45%;--primary-hover: 180 80% 50%;--primary-light: 180 80% 12%;--secondary: 195 80% 50%;--secondary-light: 195 80% 15%;--border: 220 15% 18%;--border-focus: 180 80% 50%;--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .3);--shadow-md: 0 8px 30px rgba(0, 0, 0, .3);--shadow-lg: 0 20px 40px rgba(0, 0, 0, .4)}}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:hsl(var(--bg-app));color:hsl(var(--fg-main));min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5;overflow:hidden;-webkit-user-select:none;user-select:none}.app-container{display:flex;flex-direction:column;height:100vh;width:100vw;position:relative;background-image:radial-gradient(hsl(var(--fg-main) / .05) 1.5px,transparent 1.5px);background-size:32px 32px;background-position:center}.app-header{display:flex;justify-content:space-between;align-items:center;padding:18px 28px;background-color:hsl(var(--bg-card) / .75);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid hsl(var(--border) / .5);z-index:10;box-shadow:var(--shadow-sm)}.logo-section{display:flex;align-items:center;gap:12px}.logo-icon{width:36px;height:36px;border-radius:var(--radius-sm);object-fit:cover;box-shadow:var(--shadow-sm)}.logo-title{font-size:1.25rem;font-weight:700;letter-spacing:-.02em;color:hsl(var(--fg-main))}.logo-badge{font-size:.7rem;font-weight:600;letter-spacing:.05em;background-color:hsl(var(--primary-light));color:hsl(var(--primary));padding:3px 8px;border-radius:var(--radius-sm);border:1px solid hsl(var(--primary) / .2);text-transform:uppercase}.header-controls{display:flex;align-items:center;gap:12px}.channel-wrapper{display:flex;align-items:center;gap:8px;background-color:hsl(var(--bg-app));border:1px solid hsl(var(--border));border-radius:var(--radius-md);padding:4px 12px;box-shadow:var(--shadow-sm)}.channel-hash{color:hsl(var(--fg-muted));font-weight:500}.channel-input{background:transparent;border:none;outline:none;font-family:var(--font-sans);font-size:.9rem;font-weight:600;color:hsl(var(--primary));width:140px}.peers-canvas{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;overflow:hidden;padding:40px}.peers-grid{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:40px;max-width:900px;width:100%;z-index:5}.peer-card{position:relative;display:flex;flex-direction:column;align-items:center;width:130px;cursor:pointer;animation:floatCard 4s ease-in-out infinite alternate}.peer-card:nth-child(2n){animation-delay:-2s}.avatar-ring-container{position:relative;width:90px;height:90px;display:flex;justify-content:center;align-items:center;margin-bottom:12px}.progress-ring{position:absolute;top:0;left:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none}.progress-ring-track{fill:none;stroke:hsl(var(--border));stroke-width:3px}.progress-ring-fill{fill:none;stroke:hsl(var(--primary));stroke-dasharray:264;stroke-dashoffset:264;stroke-width:4px;stroke-linecap:round;transition:stroke-dashoffset .15s ease-out}.progress-ring-fill.sending{stroke:hsl(var(--primary))}.progress-ring-fill.receiving{stroke:hsl(var(--secondary))}.avatar-bubble{position:relative;width:76px;height:76px;border-radius:var(--radius-full);display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:var(--shadow-md);transition:all .3s cubic-bezier(.2,.8,.2,1);border:4px solid hsl(var(--bg-card));z-index:2}.peer-card:hover .avatar-bubble{transform:scale(1.08);box-shadow:var(--shadow-lg);border-color:hsl(var(--primary-light))}.avatar-icon{color:#fff;transition:all .25s}.avatar-percent{font-size:.8rem;font-weight:700;color:#fff;margin-top:2px}.peer-name{font-size:.85rem;font-weight:600;text-align:center;color:hsl(var(--fg-main));width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:2px;padding:0 4px}.peer-device{font-size:.75rem;font-weight:500;color:hsl(var(--fg-muted));text-transform:capitalize}.status-indicator{display:flex;flex-direction:column;align-items:center;margin-bottom:30px;animation:fadeIn .5s ease-out}.status-pulse{position:relative;width:16px;height:16px;border-radius:var(--radius-full);background-color:hsl(var(--primary));margin-bottom:12px}.status-pulse:after{content:"";position:absolute;width:100%;height:100%;border-radius:var(--radius-full);background-color:hsl(var(--primary));opacity:.4;animation:pulseRadar 2s infinite ease-out}.status-text{font-size:.95rem;font-weight:500;color:hsl(var(--fg-muted));text-align:center}.local-client-bar{display:flex;flex-direction:column;align-items:center;padding:24px;background-color:hsl(var(--bg-card) / .75);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid hsl(var(--border) / .5);z-index:10}.local-client-card{display:flex;align-items:center;gap:14px;padding:10px 20px;border-radius:var(--radius-md);border:1px solid hsl(var(--border));background-color:hsl(var(--bg-card));box-shadow:var(--shadow-sm)}.local-avatar{width:38px;height:38px;border-radius:var(--radius-full);display:flex;justify-content:center;align-items:center}.local-info{display:flex;flex-direction:column}.local-name-label{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:hsl(var(--fg-muted))}.local-name{font-size:.9rem;font-weight:600;color:hsl(var(--fg-main))}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000040;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;justify-content:center;align-items:center;z-index:200;animation:fadeIn .25s ease-out}.modal-content{background-color:hsl(var(--bg-card));border:1px solid hsl(var(--border));border-radius:var(--radius-lg);padding:30px;width:90%;max-width:400px;box-shadow:var(--shadow-lg);animation:slideUp .3s cubic-bezier(.16,1,.3,1);text-align:center}.modal-icon-wrap{width:60px;height:60px;border-radius:var(--radius-full);background-color:hsl(var(--primary-light));color:hsl(var(--primary));display:flex;justify-content:center;align-items:center;margin:0 auto 20px}.modal-title{font-size:1.15rem;font-weight:700;margin-bottom:8px;color:hsl(var(--fg-main))}.modal-description{font-size:.9rem;color:hsl(var(--fg-muted));margin-bottom:24px;word-break:break-all;padding:0 10px}.modal-buttons{display:flex;gap:12px}.btn{flex:1;padding:12px 20px;font-family:var(--font-sans);font-size:.9rem;font-weight:600;border-radius:var(--radius-md);cursor:pointer;transition:all .2s;border:none;outline:none}.btn-secondary{background-color:hsl(var(--bg-app));color:hsl(var(--fg-main));border:1px solid hsl(var(--border))}.btn-secondary:hover{background-color:hsl(var(--border) / .4)}.btn-primary{background-color:hsl(var(--primary));color:#fff}.btn-primary:hover{background-color:hsl(var(--primary-hover))}.file-input{display:none}.drag-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:hsl(var(--primary-light) / .85);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:100;pointer-events:none;animation:fadeIn .2s ease-out;border:4px dashed hsl(var(--primary));margin:-4px}.drag-icon-wrap{width:90px;height:90px;border-radius:var(--radius-full);background-color:hsl(var(--primary));color:#fff;display:flex;justify-content:center;align-items:center;margin-bottom:20px;animation:bounce 1.5s infinite}.drag-title{font-size:1.5rem;font-weight:700;color:hsl(var(--primary));margin-bottom:6px}.drag-desc{font-size:1rem;color:hsl(var(--fg-muted))}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes floatCard{0%{transform:translateY(0)}to{transform:translateY(-10px)}}@keyframes pulseRadar{0%{transform:scale(1);opacity:.4}to{transform:scale(3.5);opacity:0}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.pulse-avatar{animation:pulseAvatar 1.5s infinite alternate}@keyframes pulseAvatar{0%{box-shadow:0 0 hsl(var(--primary) / .4)}to{box-shadow:0 0 0 10px hsl(var(--primary) / .1)}}.peer-card.reconnecting{opacity:.6}.peer-card.reconnecting .avatar-bubble{border-style:dashed!important;border-color:#f97316!important}.peer-status-reconnecting{color:#f97316;font-weight:600;animation:pulseOpacity 1.5s infinite alternate}@keyframes pulseOpacity{0%{opacity:.5}to{opacity:1}}