:root{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono:ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;--bg-app:#fff;--bg-subtle:#f4f4f5;--border:#e4e4e7;--border-focus:#09090b;--text-main:#09090b;--text-muted:#71717a;--text-faint:#a1a1aa;--btn-bg:#09090b;--btn-fg:#fff;--btn-hover:#27272a;--progress-fill:#000;--progress-track:#e4e4e7;--success:#16a34a;--danger:#dc2626;--bg-popup:#fffffff0;--shadow-popup:0 10px 25px -5px #0000001a, 0 8px 10px -6px #0000001a}[data-theme=dark]{--bg-app:#000;--bg-subtle:#121214;--border:#27272a;--border-focus:#fff;--text-main:#f4f4f5;--text-muted:#a1a1aa;--text-faint:#71717a;--btn-bg:#fff;--btn-fg:#000;--btn-hover:#e4e4e7;--progress-fill:#fff;--progress-track:#27272a;--success:#22c55e;--danger:#ef4444;--bg-popup:#121214f0;--shadow-popup:0 12px 30px -5px #0009, 0 8px 10px -6px #0006}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body{background-color:var(--bg-app);min-height:100dvh;color:var(--text-main);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color .15s,color .15s}body{overflow:hidden auto}.app-shell{flex-direction:column;width:100%;min-height:100dvh;display:flex;position:relative}.app-shell.is-dragging{background-color:var(--bg-subtle)}.app-header{-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;width:100%;max-width:480px;margin:0 auto;padding:1.25rem 1.25rem .5rem;display:flex}.brand{align-items:center;display:flex}.brand-title{letter-spacing:.08em;color:var(--text-main);font-size:1.15rem;font-weight:800}.mode-badge-wrapper{align-items:center;margin-left:.5rem;display:inline-flex;position:relative}.mode-badge-wrapper .mode-indicator{font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;opacity:.25;-webkit-user-select:none;user-select:none;cursor:pointer;border-radius:3px;padding:2px 4px;font-size:.65rem;font-weight:700;line-height:1;transition:all .15s}.mode-badge-wrapper:hover .mode-indicator,.mode-badge-wrapper:focus .mode-indicator,.mode-badge-wrapper:focus-within .mode-indicator{opacity:.95;background:var(--bg-subtle)}.mode-badge-wrapper.fallback .mode-indicator{opacity:.4;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.mode-tooltip{background:var(--bg-popup);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border);width:260px;box-shadow:var(--shadow-popup);pointer-events:none;opacity:0;z-index:1000;border-radius:8px;padding:.75rem .85rem;transition:opacity .18s,transform .18s;position:absolute;top:calc(100% + 8px);left:0;transform:translateY(-4px)}.mode-badge-wrapper:hover .mode-tooltip,.mode-badge-wrapper:focus .mode-tooltip,.mode-badge-wrapper:focus-within .mode-tooltip{opacity:1;pointer-events:auto;transform:translateY(0)}.tooltip-header{align-items:center;gap:.45rem;margin-bottom:.35rem;display:flex}.tooltip-tag{font-family:var(--font-mono);background:var(--text-main);color:var(--bg-app);letter-spacing:.05em;border-radius:3px;padding:1px 5px;font-size:.6rem;font-weight:800;line-height:1.2}.tooltip-title{font-family:var(--font-mono);color:var(--text-main);letter-spacing:.02em;font-size:.75rem;font-weight:700}.tooltip-desc{color:var(--text-muted);margin:0;font-size:.72rem;line-height:1.45}.header-actions{align-items:center;gap:.5rem;display:flex}.room-indicator{background:var(--bg-subtle);border:1px solid var(--border);border-radius:8px;align-items:center;gap:.35rem;padding:2px 6px;display:flex}.room-badge{font-family:var(--font-mono);letter-spacing:1px;cursor:pointer;padding:2px 4px;font-size:.85rem;font-weight:700}.btn-icon{border:1px solid var(--border);width:36px;height:36px;color:var(--text-muted);cursor:pointer;background:0 0;border-radius:8px;justify-content:center;align-items:center;transition:all .15s;display:inline-flex}.btn-icon:hover{color:var(--text-main);border-color:var(--text-main)}.lang-toggle{font-family:var(--font-mono);font-size:.75rem;font-weight:700}.main-content{flex-direction:column;flex:1;width:100%;max-width:480px;margin:0 auto;padding:1.5rem 1.25rem 3rem;display:flex}.view-flow{flex-direction:column;gap:1.25rem;width:100%;display:flex}.btn-solid{background:var(--btn-bg);width:100%;min-height:48px;color:var(--btn-fg);cursor:pointer;border:none;border-radius:10px;justify-content:center;align-items:center;gap:.5rem;font-family:inherit;font-size:.95rem;font-weight:600;transition:opacity .15s,transform .1s;display:flex}.btn-solid:hover{opacity:.92}.btn-solid:active{transform:scale(.99)}.btn-solid.btn-compact{width:auto;min-height:38px;padding:0 1.2rem;font-size:.85rem}.btn-outline{border:1px solid var(--border);min-height:48px;color:var(--text-main);cursor:pointer;white-space:nowrap;background:0 0;border-radius:10px;justify-content:center;align-items:center;gap:.4rem;padding:0 1.25rem;font-family:inherit;font-size:.9rem;font-weight:600;transition:all .15s;display:flex}.btn-outline:hover{border-color:var(--border-focus)}.divider{text-align:center;color:var(--text-faint);text-transform:uppercase;letter-spacing:.1em;align-items:center;font-size:.75rem;font-weight:500;display:flex}.divider:before,.divider:after{content:"";border-bottom:1px solid var(--border);flex:1}.divider span{padding:0 .75rem}.join-form{width:100%;display:flex}.input-group{align-items:center;width:100%;display:flex;position:relative}.code-input{border:1px solid var(--border);background:var(--bg-subtle);width:100%;height:52px;color:var(--text-main);font-family:var(--font-mono);letter-spacing:.25em;text-align:center;text-transform:uppercase;border-radius:12px;outline:none;padding:0 44px;font-size:1.75rem;font-weight:800;transition:border-color .15s,background-color .15s}.code-input:focus{border-color:var(--border-focus)}.camera-btn{width:36px;height:36px;color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;display:flex;position:absolute;right:8px}.camera-btn:hover{color:var(--text-main)}.connect-flow{text-align:center;align-items:center;gap:1.5rem}.code-card{flex-direction:column;align-items:center;gap:.5rem;margin-top:1rem;display:flex}.code-label{text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);font-size:.8rem}.code-huge{font-family:var(--font-mono);letter-spacing:.15em;color:var(--text-main);cursor:pointer;padding:.25rem .5rem;font-size:4rem;font-weight:800;line-height:1}.btn-copy{border:1px solid var(--border);height:32px;color:var(--text-muted);cursor:pointer;background:0 0;border-radius:6px;align-items:center;gap:.4rem;padding:0 .85rem;font-family:inherit;font-size:.75rem;font-weight:600;transition:all .15s;display:inline-flex}.btn-copy:hover{color:var(--text-main);border-color:var(--text-main)}.qr-wrapper{border:1px solid var(--border);background:#fff;border-radius:12px;padding:.75rem;line-height:0}.status-indicator{color:var(--text-muted);align-items:center;gap:.5rem;font-size:.825rem;display:inline-flex}.status-indicator .dot{background-color:var(--text-muted);border-radius:50%;width:8px;height:8px}.status-indicator.pulse .dot{animation:1.5s ease-in-out infinite pulse-dot}@keyframes pulse-dot{0%,to{opacity:.3;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}.transfer-strip{border-bottom:1px solid var(--border);flex-direction:column;gap:.4rem;padding:1rem 0;display:flex}.strip-info{justify-content:space-between;align-items:baseline;gap:.5rem;display:flex}.strip-type{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-size:.75rem;font-weight:700}.strip-title{color:var(--text-main);text-overflow:ellipsis;white-space:nowrap;font-size:.9rem;font-weight:600;overflow:hidden}.strip-metrics{font-family:var(--font-mono);color:var(--text-muted);gap:.4rem;font-size:.75rem;display:flex}.meter-track{background:var(--progress-track);border-radius:9999px;width:100%;height:4px;margin-top:.35rem;overflow:hidden}.meter-fill{background:var(--progress-fill);border-radius:9999px;height:100%;transition:width .15s ease-out}.transfer-strip.is-complete .meter-fill{background:var(--success)}.transfer-strip.is-complete .strip-type{color:var(--success)}.staged-file{background:var(--bg-subtle);border:1px solid var(--border);border-radius:10px;justify-content:space-between;align-items:center;padding:.85rem 1rem;display:flex}.staged-details{flex-direction:column;gap:.2rem;display:flex;overflow:hidden}.staged-title-row{align-items:center;gap:.5rem;display:flex;overflow:hidden}.paused-badge{text-transform:uppercase;letter-spacing:.06em;background:var(--border);color:var(--text-main);white-space:nowrap;border-radius:4px;padding:.12rem .4rem;font-size:.68rem;font-weight:700}.staged-name{text-overflow:ellipsis;white-space:nowrap;color:var(--text-main);font-size:.875rem;font-weight:600;overflow:hidden}.staged-meta{font-family:var(--font-mono);color:var(--text-muted);font-size:.75rem}.staged-buttons{flex-shrink:0;align-items:center;gap:.5rem;display:flex}.drop-canvas{border:1.5px dashed var(--border);background:0 0;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:.85rem;padding:2.25rem 1rem;transition:border-color .15s,background-color .15s;display:flex}.drop-canvas:hover{border-color:var(--border-focus)}.file-triggers{align-items:center;gap:1.5rem;display:flex}.btn-trigger{color:var(--text-main);cursor:pointer;background:0 0;border:none;border-radius:8px;flex-direction:column;align-items:center;gap:.4rem;padding:.5rem 1rem;transition:opacity .15s;display:flex}.btn-trigger:hover{opacity:.7}.btn-trigger span{font-size:.85rem;font-weight:600}.trigger-sep{background:var(--border);width:1px;height:32px}.canvas-hint{color:var(--text-faint);text-transform:lowercase;font-size:.75rem}.qr-scanner-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;background:#000000bf;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.qr-scanner-container{background:var(--bg-app);border:1px solid var(--border);border-radius:14px;width:100%;max-width:360px;padding:1.5rem 1rem 1rem;position:relative}.qr-close-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;display:flex;position:absolute;top:.75rem;right:.75rem}.qr-close-btn:hover{color:var(--text-main)}.qr-error{text-align:center;color:var(--danger);padding:2rem 1rem;font-size:.85rem}.qr-reader-box{border-radius:10px;width:100%;overflow:hidden}@media (width<=480px){.app-header{padding:1rem 1rem .25rem}.main-content{padding:1.25rem 1rem 2.5rem}.code-huge{font-size:3.25rem}}