:root{--bg-0: #0c1218;--bg-1: #141d27;--bg-2: #1c2836;--line: rgba(180, 210, 235, .12);--text: #e8f0f7;--muted: #8fa3b8;--accent: #2f9e8b;--accent-2: #3db8a3;--danger: #d4655a;--warn: #c9a227;--shadow: 0 24px 60px rgba(0, 0, 0, .45);--radius: 14px;--sidebar-w: 240px;font-family:DM Sans,sans-serif;color:var(--text);background:var(--bg-0)}*{box-sizing:border-box}html,body,#app{margin:0;height:100%;overflow:hidden}body{min-height:100vh;background:radial-gradient(1200px 600px at 10% -10%,rgba(47,158,139,.18),transparent 55%),radial-gradient(900px 500px at 100% 0%,rgba(60,110,170,.16),transparent 50%),linear-gradient(160deg,#0a1016,#101820 45%,#0d141c)}.shell{height:100%;max-width:1120px;margin:0 auto;padding:32px 20px 48px;overflow:auto}.shell.connected{max-width:none;margin:0;padding:0;overflow:hidden;display:flex}.join-view{max-width:1120px}.brand{display:flex;align-items:baseline;gap:12px;margin-bottom:28px}.brand h1{margin:0;font-size:clamp(2rem,4vw,2.75rem);letter-spacing:-.04em;font-weight:700}.brand span{color:var(--muted);font-size:.95rem}.panel{background:color-mix(in srgb,var(--bg-1) 88%,transparent);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:24px}.panel h2{margin:0 0 8px;font-size:1.15rem;font-weight:600}.panel p{margin:0 0 20px;color:var(--muted);line-height:1.5}.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.share-panel{margin-top:16px}input[type=text]{flex:1;min-width:220px;border:1px solid var(--line);background:var(--bg-2);color:var(--text);border-radius:10px;padding:14px 16px;font-family:IBM Plex Mono,monospace;font-size:1.25rem;letter-spacing:.28em;text-transform:uppercase;outline:none}input[type=text]#client-link{font-size:.9rem;letter-spacing:0;text-transform:none;font-family:DM Sans,sans-serif}input[type=text]:focus{border-color:color-mix(in srgb,var(--accent) 70%,white)}button{border:0;border-radius:10px;padding:14px 18px;font:inherit;font-weight:600;cursor:pointer;background:linear-gradient(180deg,var(--accent-2),var(--accent));color:#041310}button.secondary{background:var(--bg-2);color:var(--text);border:1px solid var(--line)}button.compact,label.file-btn.compact{padding:8px 12px;font-size:.85rem}button:disabled{opacity:.55;cursor:not-allowed}.status{margin-top:16px;color:var(--muted);font-size:.95rem}.status[data-tone=ok]{color:var(--accent-2)}.status[data-tone=warn]{color:var(--warn)}.status[data-tone=error]{color:var(--danger)}.session-view{display:flex;width:100%;height:100%;min-height:0}.session-view[hidden]{display:none!important}.sidebar{width:var(--sidebar-w);flex-shrink:0;display:flex;flex-direction:column;gap:12px;padding:16px 14px;background:color-mix(in srgb,var(--bg-1) 92%,#000);border-right:1px solid var(--line)}.sidebar-brand{display:flex;flex-direction:column;gap:6px}.sidebar-brand strong{font-size:1.15rem;letter-spacing:-.03em}.sidebar-status{margin:0;font-size:.82rem;line-height:1.35;min-height:2.4em}.sidebar-nav{display:flex;flex-direction:column;gap:8px;margin-top:8px}.nav-btn{text-align:left;background:transparent;color:var(--muted);border:1px solid transparent;padding:12px 14px}.nav-btn:hover{color:var(--text);border-color:var(--line);background:var(--bg-2)}.nav-btn.active{color:var(--text);border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 16%,var(--bg-2))}.sidebar-footer{margin-top:auto}.danger-btn{width:100%;border-color:color-mix(in srgb,var(--danger) 40%,var(--line));color:#f0c4c0}.main-pane{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;padding:12px 14px 14px;background:#070b10}.view-screen,.view-files{flex:1;min-height:0;display:flex;flex-direction:column}.view-screen[hidden],.view-files[hidden]{display:none!important}.viewport{position:relative;flex:1;min-height:0;background:#05080c;border:1px solid var(--line);border-radius:12px;overflow:hidden}.viewport video{width:100%;height:100%;object-fit:contain;background:#000;display:block;cursor:none}.viewport video::-webkit-media-controls,.viewport video::-webkit-media-controls-enclosure,.viewport video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}.hint{margin:8px 0 0;color:var(--muted);font-size:.8rem;flex-shrink:0}.badge{font-family:IBM Plex Mono,monospace;letter-spacing:.18em;color:var(--accent-2);font-size:.9rem}.files-dual{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}.file-pane{display:flex;flex-direction:column;min-height:0;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--bg-1) 80%,transparent);overflow:hidden}.file-pane.dragover{border-color:var(--accent-2);background:color-mix(in srgb,var(--accent) 12%,var(--bg-1))}.file-pane-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}.file-pane-head h3{margin:0;font-size:.95rem;font-weight:600}.file-pane-actions{display:flex;gap:6px;align-items:center}.file-path{margin:0;padding:8px 12px 4px;font-size:.75rem;color:var(--muted);font-family:IBM Plex Mono,monospace;word-break:break-all}.remote-crumbs{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:6px 10px 0}.crumb{padding:4px 8px;font-size:.75rem;background:var(--bg-2);color:var(--text);border:1px solid var(--line);border-radius:6px}.crumb-sep{color:var(--muted);font-size:.75rem}.file-list{list-style:none;margin:0;padding:6px;flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:2px}.file-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:8px 10px;border-radius:8px;cursor:pointer;border:1px solid transparent}.file-row:hover{background:var(--bg-2)}.file-row.selected{border-color:color-mix(in srgb,var(--accent) 50%,transparent);background:color-mix(in srgb,var(--accent) 14%,var(--bg-2))}.file-row.dir .file-name{color:var(--accent-2)}.file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.88rem}.file-meta{font-size:.75rem;color:var(--muted);white-space:nowrap}.icon-btn{padding:2px 8px;border-radius:6px;background:transparent;color:var(--muted);border:1px solid transparent;font-size:1rem;line-height:1}.icon-btn:hover{color:var(--danger);border-color:var(--line)}.file-pane-footer{padding:10px 12px;border-top:1px solid var(--line)}.file-pane-footer button{width:100%}.file-btn{display:inline-flex;align-items:center;border-radius:10px;padding:10px 14px;font:inherit;font-weight:600;cursor:pointer;background:var(--bg-2);color:var(--text);border:1px solid var(--line)}.file-btn:hover{border-color:color-mix(in srgb,var(--accent) 50%,white)}.transfer-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:120px;overflow:auto;flex-shrink:0}.transfer-list li{font-size:.8rem;color:var(--muted);padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--bg-1) 70%,transparent)}.transfer-list li[data-status=done]{color:var(--accent-2)}.transfer-list li[data-status=error]{color:var(--danger)}@media(max-width:900px){.shell.connected{flex-direction:column}.sidebar{width:100%;flex-direction:row;flex-wrap:wrap;align-items:center;border-right:0;border-bottom:1px solid var(--line)}.sidebar-nav{flex-direction:row;margin-top:0}.sidebar-footer{margin-top:0;margin-left:auto}.files-dual{grid-template-columns:1fr}}