:root{--bg:#f5f6fa;--bg-elevated:#fff;--text:#1a1b23;--text-muted:#6b6f7b;--border:#e2e4ea;--accent:#6d5ef8;--accent-2:#8f7bff;--accent-contrast:#fff;--success:#22c55e;--error:#ef4444;--warning:#f59e0b;--shadow:0 8px 24px #14142814;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;font:16px/1.5 var(--sans);color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#0f1015;--bg-elevated:#191a22;--text:#eceef2;--text-muted:#9a9daa;--border:#2a2c37;--accent:#8f7bff;--accent-2:#6d5ef8;--shadow:0 8px 24px #0006}}*{box-sizing:border-box}body{min-height:100svh;margin:0}#root{flex-direction:column;max-width:480px;min-height:100svh;margin:0 auto;padding:24px 20px 48px;display:flex}h1,h2,p{margin:0}button{font:inherit;cursor:pointer}input{font:inherit}.app{flex-direction:column;flex:1;gap:20px;display:flex}header{text-align:center;margin-bottom:4px}header h1{letter-spacing:-.5px;background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#0000;-webkit-background-clip:text;background-clip:text;font-size:32px;font-weight:700}.tagline{color:var(--text-muted);margin-top:6px;font-size:14px}.card{background:var(--bg-elevated);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:16px;flex-direction:column;gap:16px;padding:24px;display:flex}.status-badge{color:var(--text-muted);background:var(--bg-elevated);border:1px solid var(--border);border-radius:999px;justify-content:center;align-self:center;align-items:center;gap:8px;padding:8px 14px;font-size:14px;display:flex}.status-badge .dot{background:var(--warning);border-radius:50%;flex-shrink:0;width:8px;height:8px}.status-badge.status-connected .dot{background:var(--success)}.status-badge.status-error .dot,.status-badge.status-peer-left .dot{background:var(--error)}.create-join .primary{background:linear-gradient(135deg, var(--accent), var(--accent-2));width:100%;color:var(--accent-contrast);border:none;border-radius:12px;padding:14px;font-size:15px;font-weight:600;transition:transform .15s,opacity .15s}.create-join .primary:hover{opacity:.92}.create-join .primary:active{transform:scale(.98)}.divider{color:var(--text-muted);align-items:center;gap:12px;font-size:13px;display:flex}.divider:before,.divider:after{content:"";background:var(--border);flex:1;height:1px}.create-join form{gap:8px;display:flex}.create-join input{border:1px solid var(--border);background:var(--bg);min-width:0;color:var(--text);letter-spacing:2px;text-transform:uppercase;border-radius:10px;flex:1;padding:12px 14px;font-weight:600}.create-join input:focus{outline:2px solid var(--accent);outline-offset:-1px}.create-join form button[type=submit]{border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:10px;padding:12px 18px;font-weight:600}.create-join form button[type=submit]:disabled{opacity:.5;cursor:not-allowed}.room-code{text-align:center;align-items:center}.room-code .hint{color:var(--text-muted);font-size:14px}.room-code .code{font-family:var(--mono);letter-spacing:8px;border:1px dashed var(--accent);color:var(--text);background:0 0;border-radius:12px;padding:12px 20px;font-size:40px;font-weight:700}.room-code .qr{border-radius:12px;overflow:hidden}.room-code .link-btn{border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:10px;padding:10px 16px;font-size:14px}.dropzone{border:2px dashed var(--border);text-align:center;color:var(--text-muted);cursor:pointer;border-radius:16px;padding:40px 20px;transition:border-color .15s,background .15s}.dropzone.drag-over{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 8%, transparent)}.dropzone.disabled{cursor:default;opacity:.6}.transfer-list{gap:14px}.transfer-item{flex-direction:column;gap:6px;display:flex}.transfer-info{align-items:center;gap:8px;font-size:14px;display:flex}.transfer-info .direction{font-weight:700}.transfer-info .direction.send{color:var(--accent)}.transfer-info .direction.receive{color:var(--success)}.transfer-info .name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.transfer-info .size{color:var(--text-muted);flex-shrink:0;font-size:12px}.progress-bar{background:var(--border);border-radius:999px;height:6px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--accent), var(--accent-2));height:100%;transition:width .2s}.progress-fill.done{background:var(--success)}.secondary{border:1px solid var(--border);color:var(--text-muted);background:0 0;border-radius:10px;align-self:center;padding:10px 18px;font-size:14px}