@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";:root{--font-sans:"Inter", system-ui, -apple-system, sans-serif;--bg-gradient:radial-gradient(circle at center, #1a1528 0%, #0a0712 100%);--accent:#a855f7;--accent-light:#c084fc;--accent-glow:#a855f759;--success:#10b981;--success-glow:#10b98140;--danger:#ef4444;--danger-glow:#ef444440;--text-primary:#f8fafc;--text-secondary:#94a3b8;--glass-bg:#ffffff08;--glass-border:#ffffff12;--glass-shadow:0 16px 32px 0 #00000080;--glass-highlight:#ffffff1a;--radar-size:500px;--radar-radius:170px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background:var(--bg-gradient);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;overflow-x:hidden}#root{flex-direction:column;min-height:100vh;display:flex}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--glass-border);border-radius:99px}::-webkit-scrollbar-thumb:hover{background:var(--glass-highlight)}.grid-overlay{background-image:radial-gradient(var(--glass-border) 1px, transparent 1px);pointer-events:none;z-index:0;opacity:.5;background-size:32px 32px;width:100vw;height:100vh;position:fixed;top:0;left:0}.container{z-index:1;flex-direction:column;flex-grow:1;justify-content:space-between;align-items:center;width:100%;max-width:1200px;margin:0 auto;padding:2rem;display:flex}.glass-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:24px;padding:2rem;transition:all .3s cubic-bezier(.4,0,.2,1)}.glass-card:hover{border-color:#ffffff1f}header{justify-content:space-between;align-items:center;width:100%;margin-bottom:2rem;transition:max-width .4s cubic-bezier(.4,0,.2,1),padding .4s cubic-bezier(.4,0,.2,1),border-radius .4s cubic-bezier(.4,0,.2,1),margin .4s cubic-bezier(.4,0,.2,1);display:flex;overflow:hidden}.header-minimized{box-shadow:0 8px 32px #0006!important}.header-minimized:hover{border-color:var(--accent-light)!important;background:#ffffff14!important}.minimize-btn,.expand-btn{transition:all .2s}.minimize-btn:hover{color:var(--text-primary)!important;background:#ffffff14!important}.expand-btn:hover{color:var(--accent-light)!important}.logo-container{align-items:center;gap:12px;display:flex}.logo-icon{background:linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);width:40px;height:40px;box-shadow:0 0 20px var(--accent-glow);border-radius:12px;justify-content:center;align-items:center;font-size:20px;animation:4s ease-in-out infinite float;display:flex}.logo-text h1{letter-spacing:-.5px;background:linear-gradient(to right, #fff, var(--text-secondary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:1.5rem;font-weight:700}.logo-text p{color:var(--text-secondary);font-size:.75rem}.my-device-info{align-items:center;gap:16px;display:flex}.name-badge{flex-direction:column;align-items:flex-end;display:flex}.name-input-wrapper{align-items:center;gap:6px;display:flex}.my-name{color:var(--text-primary);text-align:right;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;max-width:150px;padding:4px 8px;font-size:.95rem;font-weight:600}.my-name:focus{border-color:var(--glass-border);background:#ffffff0d;outline:none}.edit-btn{color:var(--text-secondary);cursor:pointer;opacity:.5;background:0 0;border:none;justify-content:center;align-items:center;font-size:.8rem;transition:opacity .2s;display:flex}.name-input-wrapper:hover .edit-btn{opacity:1}.my-ip{color:var(--text-secondary);font-size:.75rem}.avatar-small{border:2px solid var(--accent);width:42px;height:42px;box-shadow:0 0 10px var(--accent-glow);background:#ffffff0d;border-radius:50%;justify-content:center;align-items:center;font-size:20px;display:flex}.radar-section{width:var(--radar-size);height:var(--radar-size);z-index:1;justify-content:center;align-items:center;margin:2rem 0;display:flex;position:relative}.radar-ring{pointer-events:none;border:1px solid #a855f714;border-radius:50%;animation:8s linear infinite pulse-ring;position:absolute}.radar-ring:first-child{width:calc(var(--radar-size) * .35);height:calc(var(--radar-size) * .35);animation-delay:0s}.radar-ring:nth-child(2){width:calc(var(--radar-size) * .7);height:calc(var(--radar-size) * .7);animation-delay:2s}.radar-ring:nth-child(3){width:calc(var(--radar-size) * .95);height:calc(var(--radar-size) * .95);animation-delay:4s}.radar-sweep{transform-origin:100% 100%;pointer-events:none;background:conic-gradient(at 100% 100%,#a855f71f 0deg,#0000 90deg);border-right:1px solid #a855f70d;border-radius:100% 0 0;width:50%;height:50%;animation:5s linear infinite radar-sweep-anim;position:absolute;top:0;left:0}@keyframes radar-sweep-anim{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.central-device{border:2px solid var(--accent);z-index:2;width:100px;height:100px;box-shadow:0 0 40px var(--accent-glow);cursor:default;background:radial-gradient(circle,#a855f733 0%,#0a0712cc 100%);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;transition:transform .3s;display:flex}.central-device:hover{transform:scale(1.05)}.central-device .icon{color:var(--text-primary);margin-bottom:4px;font-size:32px}.central-device .label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;font-size:.75rem;font-weight:500}.peer-node{transform:translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1 * var(--radar-radius))) rotate(calc(-1 * var(--angle)));cursor:pointer;z-index:3;flex-direction:column;justify-content:center;align-items:center;width:80px;height:80px;transition:all .4s cubic-bezier(.175,.885,.32,1.275);display:flex;position:absolute;top:50%;left:50%}.peer-avatar-container{background:var(--glass-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:2px dashed #fff3;border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;font-size:28px;transition:all .3s;display:flex;position:relative;box-shadow:0 4px 15px #0003}.peer-node:hover .peer-avatar-container{border:2px solid var(--accent-light);box-shadow:0 0 20px var(--accent-glow);transform:scale(1.1)}.peer-node.active-transfer .peer-avatar-container{border:2px solid #0000}.peer-name{color:var(--text-primary);text-align:center;white-space:nowrap;text-overflow:ellipsis;text-shadow:0 2px 4px #00000080;max-width:100px;margin-top:8px;font-size:.75rem;font-weight:500;overflow:hidden}.peer-os{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;font-size:.65rem}.progress-ring-svg{pointer-events:none;width:calc(100% + 8px);height:calc(100% + 8px);position:absolute;top:-4px;left:-4px;transform:rotate(-90deg)}.progress-ring-bg{fill:#0000;stroke:#ffffff0d;stroke-width:3px}.progress-ring-bar{fill:#0000;stroke:var(--accent-light);stroke-width:3px;stroke-linecap:round;transition:stroke-dashoffset .1s linear}.progress-percent{color:var(--accent-light);z-index:4;background:#0a0712e6;border-radius:4px;padding:2px 4px;font-size:.65rem;font-weight:700;position:absolute;bottom:-4px}.modal-overlay{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:100;background:#0a0712cc;justify-content:center;align-items:center;animation:.25s ease-out fadeIn;display:flex;position:fixed;inset:0}.modal-content{border:1px solid var(--glass-border);text-align:center;background:#141023f2;border-radius:28px;width:100%;max-width:420px;padding:2.25rem;animation:.3s cubic-bezier(.34,1.56,.64,1) slideUp;box-shadow:0 24px 50px #000c}.modal-header{margin-bottom:1.5rem;font-size:1.25rem;font-weight:700}.modal-body{flex-direction:column;align-items:center;gap:16px;margin-bottom:2rem;display:flex}.file-icon{color:var(--accent-light);font-size:3.5rem;animation:3s ease-in-out infinite pulse-slow}.file-info{flex-direction:column;gap:4px;display:flex}.file-name{word-break:break-all;max-width:320px;font-size:1rem;font-weight:600}.file-meta{color:var(--text-secondary);font-size:.8rem}.modal-actions{gap:12px;width:100%;display:flex}.btn{cursor:pointer;border:1px solid #0000;border-radius:14px;flex:1;padding:12px 24px;font-size:.95rem;font-weight:600;transition:all .2s}.btn-secondary{color:var(--text-primary);border-color:var(--glass-border);background:#ffffff0d}.btn-secondary:hover{background:#ffffff1a;border-color:#fff3}.btn-primary{background:linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);color:#fff;box-shadow:0 4px 15px var(--accent-glow)}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px #a855f780}.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none!important}footer{flex-direction:column;gap:16px;width:100%;margin-top:2rem;display:flex}.status-bar{color:var(--text-secondary);border:1px solid var(--glass-border);background:#ffffff05;border-radius:12px;justify-content:space-between;align-items:center;padding:10px 20px;font-size:.8rem;display:flex}.status-badge{align-items:center;gap:8px;display:flex}.status-indicator{background:var(--text-secondary);border-radius:50%;width:8px;height:8px}.status-indicator.connected{background:var(--success);box-shadow:0 0 10px var(--success-glow)}.status-indicator.connecting{background:var(--accent);box-shadow:0 0 10px var(--accent-glow);animation:1.5s infinite blink}.status-indicator.error{background:var(--danger);box-shadow:0 0 10px var(--danger-glow)}.instruction-tip{text-align:center;color:var(--text-secondary);margin-bottom:8px;font-size:.85rem;animation:4s ease-in-out infinite pulse-slow}.drag-overlay{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:99;border:4px dashed var(--accent);pointer-events:none;background:#0a0712e6;justify-content:center;align-items:center;width:100vw;height:100vh;margin:0;animation:.2s ease-out fadeIn;display:flex;position:fixed;top:0;left:0}.drag-message{text-align:center;color:var(--accent-light);flex-direction:column;align-items:center;gap:16px;font-size:1.5rem;font-weight:600;display:flex}.drag-icon{font-size:4rem;animation:1s infinite alternate bounce}.audio-toggle{border:1px solid var(--glass-border);color:var(--text-primary);cursor:pointer;background:#ffffff08;border-radius:10px;justify-content:center;align-items:center;width:36px;height:36px;transition:all .2s;display:flex}.audio-toggle:hover{background:#ffffff14}.history-section{align-self:center;width:100%;max-width:600px;margin-top:1rem}.history-title{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:.9rem;font-weight:600;display:flex}.history-list{flex-direction:column;gap:8px;max-height:150px;display:flex;overflow-y:auto}.history-item{background:#ffffff03;border:1px solid #ffffff08;border-radius:10px;justify-content:space-between;align-items:center;padding:10px 16px;font-size:.8rem;display:flex}.history-item .file-details{align-items:center;gap:12px;display:flex;overflow:hidden}.history-item .file-ext-icon{width:28px;height:28px;color:var(--accent-light);background:#a855f726;border-radius:6px;justify-content:center;align-items:center;font-size:.65rem;font-weight:700;display:flex}.history-item .file-meta-info{flex-direction:column;display:flex;overflow:hidden}.history-item .file-title{white-space:nowrap;text-overflow:ellipsis;max-width:250px;font-weight:500;overflow:hidden}.history-item .transfer-status{border-radius:99px;padding:3px 8px;font-size:.65rem;font-weight:600}.history-item .status-success{color:var(--success);background:#10b98126}.history-item .status-error{color:var(--danger);background:#ef444426}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-6px)}to{transform:translateY(0)}}@keyframes pulse-ring{0%{opacity:.6;transform:scale(.95)}50%{opacity:.2;transform:scale(1.05)}to{opacity:.6;transform:scale(.95)}}@keyframes pulse-slow{0%,to{opacity:.6}50%{opacity:1}}@keyframes blink{0%,to{opacity:.3}50%{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes bounce{to{transform:translateY(-10px)}}.install-banner{z-index:999;border-radius:20px;justify-content:space-between;align-items:center;gap:16px;width:calc(100% - 32px);max-width:480px;padding:1rem 1.25rem;animation:.4s cubic-bezier(.34,1.56,.64,1) slideUp;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%);border:1px solid var(--accent)!important;background:#141023f2!important;box-shadow:0 12px 40px #a855f733!important}.install-banner-text{text-align:left;flex-direction:column;gap:4px;display:flex}.install-banner-title{color:var(--text-primary);font-size:.95rem;font-weight:700}.install-banner-desc{color:var(--text-secondary);font-size:.75rem;line-height:1.35}.install-banner-actions{flex-shrink:0;align-items:center;gap:8px;display:flex}.btn-install-sm{border-radius:10px!important;padding:6px 14px!important;font-size:.8rem!important;font-weight:600!important}@media (width<=600px){:root{--radar-size:300px;--radar-radius:100px}.container{padding:1rem}header{flex-direction:column;align-items:center;gap:16px}.my-device-info{justify-content:center;width:100%}.radar-section{margin:1rem 0}.central-device{width:76px;height:76px}.central-device .icon{font-size:24px}.peer-node{width:70px;height:70px}.peer-avatar-container{width:52px;height:52px;font-size:22px}.peer-name{max-width:80px;font-size:.7rem}.peer-os{font-size:.6rem}.modal-content{margin:1rem;padding:1.5rem}.history-item .file-title{max-width:150px}.install-banner{flex-direction:column;align-items:stretch;gap:12px;padding:1.25rem;bottom:16px}.install-banner-actions{justify-content:flex-end}}