:root{--bg: #f4f5fb;--surface: rgb(255 255 255 / 72%);--surface-solid: #ffffff;--surface-hover: rgb(255 255 255 / 92%);--border: rgb(15 23 42 / 8%);--border-strong: rgb(15 23 42 / 14%);--text: #0b1020;--muted: #5d6576;--accent: #6366f1;--accent-2: #8b5cf6;--accent-3: #06b6d4;--grad: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent-3) 100%);--accent-soft: rgb(99 102 241 / 12%);--ok: #10b981;--bad: #ef4444;--shadow: 0 1px 2px rgb(15 23 42 / 4%), 0 8px 24px rgb(15 23 42 / 6%);--shadow-lift: 0 2px 4px rgb(15 23 42 / 5%), 0 16px 40px rgb(79 70 229 / 16%);--glow-a: rgb(99 102 241 / 22%);--glow-b: rgb(6 182 212 / 16%);--radius: 20px;color-scheme:light}@media(prefers-color-scheme:dark){:root{--bg: #07080d;--surface: rgb(22 24 34 / 66%);--surface-solid: #14161f;--surface-hover: rgb(30 33 46 / 80%);--border: rgb(255 255 255 / 7%);--border-strong: rgb(255 255 255 / 13%);--text: #eef0f7;--muted: #8e95a8;--accent: #818cf8;--accent-2: #a78bfa;--accent-3: #22d3ee;--accent-soft: rgb(129 140 248 / 14%);--ok: #34d399;--bad: #f87171;--shadow: 0 1px 2px rgb(0 0 0 / 30%);--shadow-lift: 0 16px 40px rgb(0 0 0 / 45%), 0 0 0 1px rgb(129 140 248 / 30%);--glow-a: rgb(99 102 241 / 28%);--glow-b: rgb(6 182 212 / 16%);color-scheme:dark}}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Hiragino Sans,Noto Sans JP,Yu Gothic UI,sans-serif;font-size:15px;line-height:1.6;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}button,input,textarea{font:inherit;color:inherit}button{-webkit-tap-highlight-color:transparent}svg{display:block}[hidden]{display:none!important}#app{min-height:100dvh;display:flex;flex-direction:column;position:relative;isolation:isolate}.bg-glow{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(40rem 28rem at 15% -10%,var(--glow-a),transparent 70%),radial-gradient(36rem 26rem at 95% 5%,var(--glow-b),transparent 70%)}.header{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left));background:color-mix(in srgb,var(--bg) 70%,transparent);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid var(--border)}.brand{display:flex;align-items:center;gap:10px}.logo{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--grad);color:#fff;box-shadow:0 4px 14px #6366f159}.logo svg{width:18px;height:18px;stroke-width:2.4}.brand-name{font-weight:750;font-size:17px;letter-spacing:-.02em}.header-actions{display:flex;gap:8px}.chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px 0 11px;border-radius:999px;border:1px solid var(--border-strong);background:var(--surface);cursor:pointer;font-size:14px;font-weight:550;white-space:nowrap;transition:background .15s,border-color .15s,transform .1s}.chip:hover{background:var(--surface-hover)}.chip:active{transform:scale(.97)}.chip svg{width:17px;height:17px;opacity:.8}.chip.on{border-color:transparent;background:var(--accent-soft);color:var(--accent)}.chip.on svg{opacity:1}.main{flex:1;width:100%;max-width:960px;margin:0 auto;padding:8px 16px 24px}.me{display:flex;flex-direction:column;align-items:center;padding:28px 0 20px}.radar{position:relative;width:168px;height:168px;display:grid;place-items:center;margin-bottom:14px}.ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--accent);opacity:0;animation:ping 3.6s cubic-bezier(.2,.6,.35,1) infinite}.ring.r2{animation-delay:1.2s}.ring.r3{animation-delay:2.4s}.radar.offline .ring{animation:none}@keyframes ping{0%{transform:scale(.45);opacity:.55}to{transform:scale(1.15);opacity:0}}@media(prefers-reduced-motion:reduce){.ring{animation:none;opacity:.15}.ring.r1{transform:scale(.7)}.ring.r2{transform:scale(.9)}.ring.r3{transform:scale(1.1)}}.me-name{display:inline-flex;align-items:center;gap:6px;border:none;background:none;padding:2px 6px;border-radius:8px;cursor:pointer;font-size:22px;font-weight:750;letter-spacing:-.02em}.me-name svg{width:16px;height:16px;color:var(--muted);opacity:0;transition:opacity .15s}.me-name:hover svg,.me-name:focus-visible svg{opacity:1}@media(hover:none){.me-name svg{opacity:.7}}.me-sub{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:14px}.dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}.dot.ok{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent)}.avatar{--h: 240;flex:none;width:52px;height:52px;border-radius:17px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,hsl(var(--h) 85% 64%),hsl(calc(var(--h) + 40) 78% 52%));box-shadow:inset 0 1px #ffffff40}.avatar svg{width:26px;height:26px}.avatar.me-avatar{width:84px;height:84px;border-radius:28px;position:relative;box-shadow:inset 0 1px #ffffff40,0 12px 32px hsl(var(--h) 80% 55% / 40%)}.avatar.me-avatar svg{width:40px;height:40px}.avatar.small{width:40px;height:40px;border-radius:13px}.avatar.small svg{width:21px;height:21px}.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:8px 2px 10px}.section-head h2{font-size:13px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0}.small{font-size:12.5px}.muted{color:var(--muted);font-weight:400}.peers{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}.peer{position:relative;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.peer:not(.disabled):hover,.peer.drag{transform:translateY(-2px);box-shadow:var(--shadow-lift);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}.peer.drag{outline:2px dashed var(--accent);outline-offset:3px}.peer-main{width:100%;display:flex;align-items:center;gap:14px;padding:14px 54px 14px 14px;border:none;background:none;border-radius:var(--radius);cursor:pointer;text-align:left}.peer.disabled .peer-main{cursor:not-allowed}.peer.disabled .avatar{filter:grayscale(.85);opacity:.55}.peer-info{min-width:0;display:flex;flex-direction:column}.pname{display:flex;align-items:center;gap:8px;font-weight:650;font-size:16px;min-width:0}.pname-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pdev{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.badge{flex:none;font-size:11px;font-weight:650;padding:1px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}.peer-lock{position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--muted)}.peer-lock svg{width:18px;height:18px}.peer-text{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:38px;height:38px;display:grid;place-items:center;border:none;border-radius:12px;background:transparent;color:var(--muted);cursor:pointer;transition:background .15s,color .15s}.peer-text:hover{background:var(--accent-soft);color:var(--accent)}.peer-text svg{width:20px;height:20px}.empty{grid-column:1 / -1;text-align:center;padding:8px 16px 24px}.empty p{margin:2px 0}.empty-title{font-weight:650;font-size:16px}.transfers{margin-top:28px}.transfer{display:flex;gap:14px;padding:14px;margin-bottom:10px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.ticon{flex:none;width:40px;height:40px;border-radius:13px;display:grid;place-items:center;color:#fff;background:var(--grad)}.ticon svg{width:20px;height:20px;stroke-width:2.2}.transfer.waiting .ticon{background:var(--accent-soft);color:var(--accent)}.transfer.done .ticon{background:var(--ok)}.transfer.failed .ticon{background:var(--bad)}.tbody{flex:1;min-width:0}.ttop{display:flex;gap:12px;align-items:baseline}.tlabel{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tpct{font-weight:700;font-variant-numeric:tabular-nums}.transfer.done .tpct{color:var(--ok)}.transfer.failed .tpct{color:var(--bad)}.tpeer{font-size:13px;color:var(--muted)}.bar{position:relative;height:6px;background:var(--border);border-radius:999px;overflow:hidden;margin:10px 0 6px}.fill{position:relative;height:100%;border-radius:999px;background:var(--grad);transition:width .3s linear;overflow:hidden}.transfer.active .fill:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgb(255 255 255 / 45%),transparent);transform:translate(-100%);animation:shimmer 1.4s ease-in-out infinite}@keyframes shimmer{to{transform:translate(100%)}}.transfer.done .fill{background:var(--ok)}.transfer.failed .fill{background:var(--bad)}.tbottom{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.tstatus{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}.transfer.failed .tstatus{color:var(--bad)}.hint{font-size:12px;color:var(--muted);margin-top:2px}.text-btn{border:none;background:none;padding:2px 4px;color:var(--accent);font-size:13px;font-weight:600;cursor:pointer;border-radius:6px;white-space:nowrap}.text-btn:hover{background:var(--accent-soft)}.footer{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 16px max(18px,env(safe-area-inset-bottom));font-size:12px;color:var(--muted);text-align:left}.footer svg{flex:none;width:16px;height:16px;color:var(--ok)}.dialog{border:1px solid var(--border);border-radius:24px;padding:0;width:min(440px,calc(100vw - 24px));background:var(--surface-solid);color:var(--text);box-shadow:0 24px 64px #0000004d}.dialog[open]{animation:pop .22s cubic-bezier(.2,.9,.3,1.15)}@keyframes pop{0%{opacity:0;transform:translateY(8px) scale(.96)}}.dialog::backdrop{background:#05060c73;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.dialog-body{padding:22px}.dialog-body h2{font-size:18px;font-weight:700;letter-spacing:-.01em;margin:0 0 4px;overflow-wrap:anywhere}.dialog-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}.dialog-head h2{margin:0}.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;flex-wrap:wrap}.btn{height:42px;padding:0 18px;border:1px solid var(--border-strong);background:transparent;border-radius:12px;cursor:pointer;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;transition:background .15s,transform .1s,filter .15s}.btn:hover{background:var(--accent-soft)}.btn:active{transform:scale(.97)}.btn.primary{border:none;background:var(--grad);color:#fff;box-shadow:0 6px 18px #6366f152}.btn.primary:hover{filter:brightness(1.08)}.btn.ghost{border-color:transparent}.btn.wide{width:100%;margin-top:10px}.input{width:100%;border:1px solid var(--border-strong);background:var(--bg);border-radius:12px;padding:11px 14px;margin-top:10px;font-size:16px;outline:none;transition:border-color .15s,box-shadow .15s}.input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}.input.code{letter-spacing:.25em;font-variant-numeric:tabular-nums;margin-top:0;text-align:center}textarea.input{resize:vertical}.row{display:flex;gap:8px}.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;margin:16px 0}.or:before,.or:after{content:"";flex:1;height:1px;background:var(--border-strong)}.error{color:var(--bad);min-height:1.6em;margin:6px 0 0;font-size:14px}.filelist{list-style:none;padding:4px 12px;margin:12px 0 0;max-height:40vh;overflow:auto;background:var(--bg);border-radius:14px}.filelist li{display:flex;gap:12px;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:14px}.filelist li:last-child{border-bottom:none}.fname{overflow-wrap:anywhere}.fsize{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}.filelist .more{color:var(--muted)}.textbox{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--bg);border-radius:14px;padding:14px;max-height:50vh;overflow:auto;margin:12px 0 0;font-family:inherit;user-select:text}.roomcode{font-size:40px;font-weight:800;letter-spacing:.12em;text-align:center;margin:10px 0 14px;font-variant-numeric:tabular-nums;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}.qr{display:block;margin:0 auto;background:#fff;border-radius:16px;padding:8px;box-shadow:var(--shadow)}.toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translate(-50%,16px);background:color-mix(in srgb,var(--text) 92%,transparent);color:var(--bg);padding:11px 18px;border-radius:14px;max-width:calc(100vw - 32px);opacity:0;pointer-events:none;transition:opacity .2s,transform .25s cubic-bezier(.2,.9,.3,1.2);z-index:10;font-size:14px;font-weight:550;box-shadow:0 12px 32px #00000040;backdrop-filter:blur(8px)}.toast.show{opacity:1;transform:translate(-50%)}@media(max-width:520px){.peers{grid-template-columns:1fr}.chip-label{max-width:7em;overflow:hidden;text-overflow:ellipsis}.me{padding-top:18px}.radar{width:148px;height:148px}}@media(max-width:360px){.brand-name{display:none}}