:root{color-scheme:dark;--bg: #060a12;--text: #e6edf7;--muted: #8ea0b8;--muted-2: #64748b;--line: rgba(148, 163, 184, .14);--accent: #22d3ee;--accent-2: #6366f1;--green: #34d399;--amber: #fbbf24;--red: #f87171;--radius: 16px;font-family:system-ui,-apple-system,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Noto Sans SC,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;color:var(--text);background:radial-gradient(900px 620px at 10% -12%,rgba(34,211,238,.16),transparent 60%),radial-gradient(820px 520px at 102% -4%,rgba(99,102,241,.2),transparent 58%),var(--bg);background-attachment:fixed;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}button,input{font:inherit;color:inherit}:focus-visible{outline:2px solid rgba(34,211,238,.75);outline-offset:2px}::selection{background:#22d3ee47}.app{display:flex;flex-direction:column;min-height:100vh}.header{width:100%;max-width:1180px;margin:0 auto;padding:22px 24px 14px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:13px;color:#04121b;background:linear-gradient(135deg,#22d3ee,#6366f1);box-shadow:0 10px 28px -10px #22d3eebf}.brand-mark svg{width:24px;height:24px}.brand-text{display:flex;flex-direction:column;line-height:1.2}.brand-text strong{font-size:19px;letter-spacing:.02em}.brand-text small{font-size:11px;color:var(--muted)}.header-status{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.pill{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);padding:7px 11px;border-radius:999px;border:1px solid var(--line);background:#0f172a99;white-space:nowrap}.dot{width:7px;height:7px;border-radius:50%;background:var(--muted-2);display:inline-block;flex:none}.pill-wifi .dot,.pill-open .dot{background:var(--green);box-shadow:0 0 8px #34d399d9}.pill-cellular .dot,.pill-connecting .dot{background:var(--amber)}.pill-connecting .dot{animation:pulse 1.2s ease-in-out infinite}.pill-offline .dot,.pill-closed .dot{background:var(--red)}@keyframes pulse{50%{opacity:.3}}.network-banner{width:calc(100% - 48px);max-width:1132px;margin:0 auto 8px;padding:10px 16px;border-radius:13px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px;color:#fcd34d;border:1px solid rgba(251,191,36,.3);background:#fbbf2414}.network-banner span{color:var(--muted)}.network-banner.is-offline{color:#fca5a5;border-color:#f8717159;background:#f8717114}.main{width:100%;max-width:1180px;margin:0 auto;padding:0 24px 40px;flex:1}.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:36px;align-items:end;padding:14px 0 30px}.eyebrow{margin:0;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}.hero h1{margin:10px 0 14px;font-size:clamp(30px,4.2vw,46px);line-height:1.12;letter-spacing:-.025em;font-weight:700}.hero-text{margin:0;max-width:560px;color:var(--muted);font-size:14px;line-height:1.75}.hero-facts{list-style:none;margin:0;padding:0;display:grid;gap:10px}.hero-facts li{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--line);border-radius:14px;background:#0f172a73}.fact-tag{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;font-weight:700;letter-spacing:.04em}.fact-tag.direct{color:#6ee7b7;background:#34d3991a;border:1px solid rgba(52,211,153,.3)}.fact-tag.relay{color:#fcd34d;background:#fbbf241a;border:1px solid rgba(251,191,36,.3)}.fact-tag.multi{color:#a5b4fc;background:#6366f11f;border:1px solid rgba(99,102,241,.32)}.hero-facts b{display:block;font-size:14px}.hero-facts small{display:block;margin-top:2px;font-size:12px;color:var(--muted)}.panels{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}.panel{padding:20px;border-radius:22px;border:1px solid var(--line);background:linear-gradient(180deg,#111a2cdb,#0a111ecc);box-shadow:0 30px 90px -50px #000000f2;backdrop-filter:blur(14px);transition:border-color .18s ease,box-shadow .18s ease}.panel.is-dragging{border-color:#22d3ee99;box-shadow:0 0 0 3px #22d3ee1f,0 30px 90px -50px #000000f2}.panel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:16px}.panel-kicker{font-size:10.5px;font-weight:600;letter-spacing:.16em;color:var(--muted-2)}.panel-head h2{margin:5px 0 0;font-size:22px;letter-spacing:-.01em}.panel-count{font-size:12px;color:var(--muted);padding:5px 10px;border-radius:999px;border:1px solid var(--line);white-space:nowrap}.dropzone{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 18px;border-radius:var(--radius);border:1.5px dashed rgba(148,163,184,.32);background:#080e1a8c;cursor:pointer;transition:border-color .18s ease,background .18s ease}.dropzone:hover{border-color:#22d3ee8c;background:#22d3ee0f}.drop-arrow{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;font-size:22px;line-height:1;color:var(--accent);background:#22d3ee1f;border:1px solid rgba(34,211,238,.3)}.drop-title{font-size:15px;font-weight:600}.drop-hint{font-size:12px;color:var(--muted);text-align:center}.join-form{padding:16px;border-radius:var(--radius);border:1px solid var(--line);background:#080e1a80}.join-form label{font-size:12px;color:var(--muted)}.code-row{display:flex;gap:10px;margin-top:8px}.code-input{flex:1;min-width:0;padding:12px 14px;border-radius:12px;border:1px solid rgba(148,163,184,.24);background:#0a1220;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:22px;font-weight:600;line-height:1;letter-spacing:.32em;text-align:center;text-transform:uppercase;outline:none;transition:border-color .15s ease,box-shadow .15s ease}.code-input:focus{border-color:#22d3eeb3;box-shadow:0 0 0 3px #22d3ee1f}.code-input::placeholder{color:#94a3b852;letter-spacing:.32em}.hint{margin:10px 0 0;font-size:12px;line-height:1.55;color:var(--muted)}.btn{padding:10px 16px;border-radius:10px;border:1px solid transparent;cursor:pointer;font-size:14px;white-space:nowrap;transition:background .15s ease,border-color .15s ease,filter .15s ease,transform .05s ease}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{color:#04121b;font-weight:700;background:linear-gradient(135deg,#22d3ee,#6366f1)}.btn-primary:hover:not(:disabled){filter:brightness(1.08)}.btn-ghost{color:var(--text);background:#94a3b814;border-color:#94a3b833}.btn-ghost:hover{background:#94a3b824;border-color:#94a3b859}.btn-ghost.is-on{color:var(--accent);border-color:#22d3ee80}.btn-danger{color:#fca5a5;background:#f871711a;border-color:#f8717140}.btn-danger:hover{background:#f871712e}.btn-sm{padding:7px 11px;font-size:12.5px;border-radius:9px}.task-list{display:flex;flex-direction:column;gap:12px;margin-top:16px}.empty{margin:0;padding:16px;border-radius:14px;border:1px dashed var(--line);color:var(--muted);font-size:13px;line-height:1.7}.task{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:var(--radius);border:1px solid var(--line);background:#080e1a8c;animation:rise .2s ease}@keyframes rise{0%{opacity:0;transform:translateY(4px)}}.task.phase-completed{border-color:#34d39942}.task.phase-failed{border-color:#f871714d}.task.phase-paused,.task.phase-interrupted{border-color:#fbbf2452}.task-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.task-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.task-time{font-size:11px;color:var(--muted-2);white-space:nowrap}.role-chip,.phase-chip,.route-chip{padding:3px 8px;border-radius:999px;border:1px solid var(--line);background:#94a3b80f;color:var(--muted);font-size:11px;white-space:nowrap}.role-send{color:#a5b4fc;border-color:#6366f14d;background:#6366f11a}.role-receive{color:#67e8f9;border-color:#22d3ee4d;background:#22d3ee14}.phase-negotiating{color:#a5b4fc;border-color:#6366f14d}.phase-transferring{color:#67e8f9;border-color:#22d3ee4d;background:#22d3ee14}.phase-completed{color:#6ee7b7;border-color:#34d3994d;background:#34d39914}.phase-failed{color:#fca5a5;border-color:#f871714d;background:#f8717114}.phase-paused,.phase-interrupted{color:#fcd34d;border-color:#fbbf244d;background:#fbbf2414}.phase-canceled{color:var(--muted)}.route-p2p{color:#6ee7b7;border-color:#34d39959;background:#34d39914}.route-relay{color:#fcd34d;border-color:#fbbf2459;background:#fbbf2414}.route-staging{color:#93c5fd;border-color:#60a5fa59;background:#60a5fa14}.share-strip{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:12px;border:1px solid rgba(34,211,238,.16);background:#22d3ee0d}.code-block{display:flex;align-items:baseline;gap:8px;min-width:0}.code-label{font-size:11px;color:var(--muted)}.code-value{padding:0;border:none;background:none;color:var(--accent);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:20px;font-weight:700;line-height:1;letter-spacing:.16em;cursor:pointer}.code-value:hover{text-decoration:underline dotted}.code-value.is-static{cursor:default}.code-value.is-static:hover{text-decoration:none}.peer-state{padding:3px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted);font-size:11px;white-space:nowrap}.peer-state.is-online{color:#6ee7b7;border-color:#34d39959;background:#34d39914}.task-file{display:flex;align-items:center;gap:10px}.file-tile{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:10px;border:1px solid rgba(99,102,241,.25);background:#6366f11f;color:#a5b4fc;font-size:9px;font-weight:700;letter-spacing:.06em}.file-info{flex:1;min-width:0}.file-name{margin:0;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-meta{margin:3px 0 0;font-size:11.5px;color:var(--muted)}.file-percent{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}.progress{height:6px;border-radius:999px;background:#94a3b824;overflow:hidden}.progress>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#22d3ee,#6366f1);transition:width .25s ease}.phase-paused .progress>span,.phase-interrupted .progress>span{background:linear-gradient(90deg,#fbbf24,#f59e0b)}.phase-failed .progress>span{background:linear-gradient(90deg,#f87171,#ef4444)}.phase-completed .progress>span{background:linear-gradient(90deg,#34d399,#10b981)}.task-note{margin:0;min-height:18px;color:var(--muted);font-size:12px;line-height:1.5;overflow-wrap:anywhere}.task-note.is-error{color:#fca5a5}.task-actions{display:flex;flex-wrap:wrap;gap:8px;padding-top:2px}.qr-box{display:flex;align-items:center;gap:14px;padding:12px;border-radius:12px;border:1px solid var(--line);background:#ffffff08}.qr-frame{width:120px;height:120px;flex:none;display:grid;place-items:center;overflow:hidden;border-radius:10px;background:#fff}.qr-frame img{display:block;width:100%;height:100%}.qr-frame span{color:#334155;font-size:11px}.qr-side{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px}.qr-side p{margin:0;font-size:12px;color:var(--muted)}.qr-side code{display:block;max-width:100%;padding:6px 8px;border-radius:8px;border:1px solid rgba(99,102,241,.2);background:#6366f114;color:#a5b4fc;font-size:11px;overflow-wrap:anywhere}.toasts{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:50;display:flex;flex-direction:column;gap:8px;width:min(360px,calc(100vw - 36px))}.toast{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border-radius:12px;border:1px solid var(--line);background:#0f172af5;box-shadow:0 18px 40px -20px #000000e6;font-size:13px;line-height:1.45;animation:rise .2s ease}.toast span{flex:1;overflow-wrap:anywhere}.toast button{padding:0 2px;border:none;background:none;color:var(--muted);font-size:16px;line-height:1;cursor:pointer}.toast-success{border-color:#34d39959}.toast-error{border-color:#f8717166}.toast-info{border-color:#22d3ee59}.footer{width:100%;max-width:1180px;margin:0 auto;padding:16px 24px calc(24px + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;border-top:1px solid rgba(148,163,184,.08);color:var(--muted-2);font-size:11.5px}.footer-brand{color:var(--muted);font-weight:700;letter-spacing:.04em}@media (max-width: 980px){.hero{grid-template-columns:1fr;gap:22px;align-items:start}.hero-facts{grid-template-columns:repeat(3,1fr)}.panels{grid-template-columns:1fr}}@media (max-width: 720px){.hero-facts{grid-template-columns:1fr}}@media (max-width: 640px){.header{padding:16px 16px 10px}.brand-mark{width:38px;height:38px;border-radius:11px}.brand-text small{display:none}.pill{padding:6px 9px;font-size:11px}.main{padding:0 16px 28px}.network-banner{width:calc(100% - 32px)}.hero{padding-top:6px;padding-bottom:22px}.panel{padding:16px;border-radius:18px}.code-row{flex-direction:column}.code-row .btn{width:100%}.share-strip{flex-direction:column;align-items:flex-start;gap:6px}.task-file{flex-wrap:wrap}.file-percent{margin-left:auto}.qr-box{flex-direction:column;align-items:flex-start}.footer{padding:14px 16px calc(20px + env(safe-area-inset-bottom));gap:4px 12px;font-size:10.5px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}