:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:400;line-height:1.6}a{color:#6366f1;text-decoration:none}a:hover{color:#818cf8}#root{min-height:100vh}:root{--bg:#0f0f13;--bg-secondary:#1a1a24;--bg-tertiary:#252535;--text:#e4e4ef;--text-secondary:#9494a8;--accent:#6366f1;--accent-hover:#818cf8;--success:#22c55e;--danger:#ef4444;--danger-hover:#f87171;--border:#2a2a3c;--radius:12px;--radius-sm:8px}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6}.app{flex-direction:column;max-width:960px;min-height:100vh;margin:0 auto;padding:2rem 1.5rem;display:flex}.app-header{text-align:center;margin-bottom:2.5rem}.app-header h1{background:linear-gradient(135deg, var(--accent), #a855f7);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:.25rem;font-size:2.2rem;font-weight:700}.tagline{color:var(--text-secondary);font-size:.95rem}.btn{border-radius:var(--radius-sm);cursor:pointer;border:none;justify-content:center;align-items:center;padding:.6rem 1.2rem;font-size:.9rem;font-weight:500;transition:all .2s;display:inline-flex}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-secondary{background:var(--bg-tertiary);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover:not(:disabled){background:var(--border)}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover:not(:disabled){background:var(--danger-hover)}.btn-sm{padding:.35rem .75rem;font-size:.8rem}.room-join{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);text-align:center;padding:2rem}.room-join h2{margin-bottom:.5rem;font-size:1.3rem}.room-description{color:var(--text-secondary);max-width:480px;margin-bottom:1.5rem;margin-left:auto;margin-right:auto;font-size:.85rem}.room-actions{flex-direction:column;align-items:center;gap:1rem;display:flex}.join-form{gap:.5rem;width:100%;max-width:400px;display:flex}.join-form input{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);outline:none;flex:1;padding:.6rem 1rem;font-size:.9rem;transition:border-color .2s}.join-form input:focus{border-color:var(--accent)}.join-form input::placeholder{color:var(--text-secondary)}.divider{width:100%;max-width:400px;color:var(--text-secondary);align-items:center;gap:1rem;font-size:.8rem;display:flex}.divider:before,.divider:after{content:"";background:var(--border);flex:1;height:1px}.room-connected{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:1.25rem 1.5rem;display:flex}.room-info{flex-wrap:wrap;align-items:center;gap:1.5rem;display:flex}.room-status{align-items:center;gap:.5rem;font-weight:500;display:flex}.status-dot{background:var(--text-secondary);border-radius:50%;width:8px;height:8px}.status-dot.connected{background:var(--success);box-shadow:0 0 6px #22c55e80}.room-code-display{background:var(--bg);border-radius:var(--radius-sm);cursor:pointer;align-items:center;gap:.5rem;padding:.35rem .75rem;transition:background .2s;display:flex}.room-code-display:hover{background:var(--bg-tertiary)}.room-code-label{color:var(--text-secondary);font-size:.8rem}.room-code-value{color:var(--accent);letter-spacing:.05em;font-family:JetBrains Mono,Fira Code,monospace;font-weight:600}.copy-icon{opacity:.6;font-size:.85rem}.peer-count{color:var(--text-secondary);font-size:.85rem}.connected-content{grid-template-columns:1fr 240px;gap:1.5rem;margin-top:1.5rem;display:grid}.main-area{flex-direction:column;gap:1.5rem;display:flex}.file-drop{border:2px dashed var(--border);border-radius:var(--radius);text-align:center;cursor:pointer;background:var(--bg-secondary);padding:3rem 2rem;transition:all .2s}.file-drop:hover:not(.disabled){border-color:var(--accent);background:#6366f10d}.file-drop.drag-over{border-color:var(--accent);background:#6366f11a;transform:scale(1.01)}.file-drop.disabled{opacity:.5;cursor:not-allowed}.file-drop-content{flex-direction:column;align-items:center;gap:.75rem;display:flex}.file-drop-icon{color:var(--text-secondary)}.file-drop-text{font-size:1rem;font-weight:500}.file-drop-subtext{color:var(--text-secondary);font-size:.85rem}.peer-list{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem}.peer-list.empty{text-align:center;color:var(--text-secondary);font-size:.85rem}.peer-list.empty .hint{opacity:.7;margin-top:.5rem;font-size:.75rem}.peer-list h3{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem;font-size:.9rem;font-weight:600}.peer-list ul{flex-direction:column;gap:.5rem;list-style:none;display:flex}.peer-item{background:var(--bg);border-radius:var(--radius-sm);align-items:center;gap:.5rem;padding:.4rem .6rem;font-size:.85rem;display:flex}.peer-id{font-family:JetBrains Mono,Fira Code,monospace;font-size:.8rem}.transfer-list{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem}.transfer-list h3{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem;font-size:.9rem;font-weight:600}.transfer-item{background:var(--bg);border-radius:var(--radius-sm);margin-bottom:.5rem;padding:.75rem}.transfer-item:last-child{margin-bottom:0}.transfer-info{justify-content:space-between;align-items:center;margin-bottom:.4rem;display:flex}.transfer-name{text-overflow:ellipsis;white-space:nowrap;max-width:300px;font-size:.9rem;font-weight:500;overflow:hidden}.transfer-size,.transfer-direction{color:var(--text-secondary);font-size:.8rem}.transfer-label{color:var(--text-secondary);margin-bottom:.5rem;font-size:.8rem}.progress-bar{background:var(--bg-tertiary);border-radius:3px;width:100%;height:6px;margin-bottom:.4rem;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--accent), #a855f7);border-radius:3px;height:100%;transition:width .3s}.transfer-stats{color:var(--text-secondary);justify-content:space-between;font-size:.8rem;display:flex}.completed-label{color:var(--success);font-weight:500}.error-label{color:var(--danger);font-weight:500}.offer-actions{gap:.5rem;margin-top:.5rem;display:flex}.transfer-item.received{justify-content:space-between;align-items:center;display:flex}.transfer-item.received .transfer-info{margin-bottom:0}.error-banner{color:var(--danger);border-radius:var(--radius-sm);background:#ef444426;border:1px solid #ef44444d;margin-bottom:1rem;padding:.75rem 1rem;font-size:.85rem}.app-footer{text-align:center;color:var(--text-secondary);margin-top:auto;padding-top:2rem;font-size:.8rem}@media (width<=768px){.connected-content{grid-template-columns:1fr}.sidebar{order:-1}.room-connected{text-align:center;flex-direction:column}.room-info{flex-direction:column;gap:.75rem}}