:root{--bg: #0f0f0f;--panel: #1a1a1a;--border: #2e2e2e;--fg: #ffffff;--fg2: #999;--fg3: #555;--green: #4ade80;--red: #f87171;--amber: #fbbf24}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;background:var(--bg);color:var(--fg);font-family:JetBrains Mono,SF Mono,Fira Code,monospace}body{display:flex;flex-direction:column}header{display:flex;align-items:center;gap:16px;padding:10px 20px;border-bottom:1px solid var(--border);background:var(--panel);flex-shrink:0}.logo{font-size:15px;font-weight:600;letter-spacing:3px;color:var(--fg2)}.logo b{color:var(--fg)}.tag{font-size:10px;padding:2px 7px;border:1px solid var(--border);color:var(--fg3);border-radius:2px}#hero{display:flex;flex-direction:column;align-items:center;padding:32px 20px 16px;text-align:center;flex-shrink:0}.hero-title{font-size:20px;font-weight:600;letter-spacing:4px;margin-bottom:10px}.hero-desc{font-size:12px;color:var(--fg2);max-width:520px;line-height:1.8}.hero-offline{font-size:11px;color:var(--green);margin-top:8px;letter-spacing:1px}#download-bar{display:flex;justify-content:center;padding:8px 20px 16px;flex-shrink:0}.dl-link{font-family:inherit;font-size:11px;color:var(--fg2);text-decoration:none;border:1px solid var(--border);padding:6px 16px;letter-spacing:1px;display:inline-flex;align-items:center;gap:8px;transition:border-color .2s,color .2s}.dl-link:hover{border-color:var(--fg2);color:var(--fg)}.dl-link svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}#mode-bar{display:flex;justify-content:center;gap:12px;padding:0 20px 20px;flex-shrink:0}.mode-btn{font-family:inherit;font-size:12px;padding:10px 32px;background:transparent;border:1px solid var(--border);color:var(--fg2);cursor:pointer;letter-spacing:2px;transition:border-color .2s,color .2s,background .2s;display:inline-flex;align-items:center;gap:8px}.mode-btn:hover{border-color:var(--fg2);color:var(--fg)}.mode-btn.active{border-color:var(--fg);color:var(--fg);background:#ffffff0a}.mode-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}#common-area{flex:1;display:flex;overflow:hidden;position:relative;border-top:1px solid var(--border)}#common-area.fullscreen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;border-top:none}.fs-btn{position:absolute;top:8px;right:8px;z-index:10;background:var(--panel);border:1px solid var(--border);color:var(--fg2);cursor:pointer;padding:6px;display:flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s}.fs-btn:hover{border-color:var(--fg2);color:var(--fg)}.fs-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}#sender-panel,#receiver-panel{display:none;flex:1;overflow:hidden}#sender-panel.active,#receiver-panel.active{display:flex}#sender-panel{flex-direction:row}#send-qr-area{flex:1;display:flex;align-items:center;justify-content:center;background:#000;position:relative}#send-drop-zone{display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer;-webkit-user-select:none;user-select:none}#send-drop-zone.drag{opacity:.6}.drop-hint{font-size:13px;color:var(--fg3)}.drop-btn{font-family:inherit;font-size:12px;padding:9px 20px;background:transparent;border:1px solid var(--border);color:var(--fg2);cursor:pointer;letter-spacing:1px}.drop-btn:hover{border-color:var(--fg2);color:var(--fg)}#send-file-input{display:none}#send-qr-display{display:none;flex-direction:column;align-items:center;gap:12px}#send-qr-box{padding:16px;background:#fff}#send-qr-box canvas,#send-qr-box img{display:block}#send-qr-info{font-size:11px;color:var(--fg3);text-align:center;line-height:1.8}#send-progress-wrap{width:100%;max-width:320px;height:2px;background:var(--border)}#send-progress-fill{height:100%;background:var(--fg);width:0}#send-sidebar{width:280px;flex-shrink:0;border-left:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;background:var(--panel)}#receiver-panel{flex-direction:row}#recv-cam-area{flex:1;position:relative;background:#000;display:flex;align-items:center;justify-content:center}#recv-video{width:100%;height:100%;object-fit:cover}#recv-scan-canvas{display:none}#recv-scan-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;display:flex;align-items:center;justify-content:center}.frame{width:min(50vw,50vh);height:min(50vw,50vh);position:relative}.frame:before,.frame:after,.frame .c2:before,.frame .c2:after{content:"";position:absolute;width:20px;height:20px;border-color:var(--fg);border-style:solid}.frame:before{top:0;left:0;border-width:2px 0 0 2px}.frame:after{top:0;right:0;border-width:2px 2px 0 0}.frame .c2:before{bottom:0;left:0;border-width:0 0 2px 2px}.frame .c2:after{bottom:0;right:0;border-width:0 2px 2px 0}#recv-start-prompt{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--bg)}#recv-complete{position:absolute;top:0;right:0;bottom:0;left:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#000000eb}.complete-title{font-size:18px;font-weight:600;color:var(--green);letter-spacing:2px}.sha{font-size:10px;color:var(--fg3);word-break:break-all;max-width:300px;text-align:center}#recv-sidebar{width:280px;flex-shrink:0;border-left:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;background:var(--panel)}.sect{padding:16px;border-bottom:1px solid var(--border)}.sect-title{font-size:9px;letter-spacing:2px;color:var(--fg3);text-transform:uppercase;margin-bottom:12px}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border)}.stat{background:var(--bg);padding:10px}.stat-v{font-size:16px;font-weight:600;color:var(--fg)}.stat-v.ok{color:var(--green)}.stat-v.warn{color:var(--amber)}.stat-v.err{color:var(--red)}.stat-l{font-size:9px;color:var(--fg3);margin-top:2px;letter-spacing:1px;text-transform:uppercase}.row{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}.btn{font-family:inherit;font-size:11px;padding:7px 14px;background:transparent;border:1px solid var(--border);color:var(--fg2);cursor:pointer;letter-spacing:1px;display:inline-flex;align-items:center;gap:6px}.btn:hover{border-color:var(--fg2);color:var(--fg)}.btn.active{border-color:var(--fg);color:var(--fg)}.btn:disabled{opacity:.3;cursor:default}.btn.danger{border-color:var(--red);color:var(--red)}.btn.danger:hover{background:#f8717114}.btn.pri{border-color:var(--fg);color:var(--fg)}.btn.pri:hover{background:var(--fg);color:var(--bg)}.btn.suc{border-color:var(--green);color:var(--green)}.btn.suc:hover{background:var(--green);color:#000}.btn.warn{border-color:var(--amber);color:var(--amber)}.btn.warn:hover{background:#fbbf241a}.btn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}.lbl-row{display:flex;justify-content:space-between;font-size:11px;color:var(--fg2);margin-bottom:6px}.lbl-row b{color:var(--fg)}input[type=range]{width:100%;accent-color:var(--fg);cursor:pointer;margin-bottom:12px}select{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--fg2);font-family:inherit;font-size:11px;padding:7px;cursor:pointer}select:focus{outline:none;border-color:var(--fg2)}.inline-row{display:flex;gap:6px}input[type=number],input[type=text]{background:var(--bg);border:1px solid var(--border);color:var(--fg);font-family:inherit;font-size:12px;padding:7px 9px;flex:1;outline:none}input[type=number]:focus,input[type=text]:focus{border-color:var(--fg2)}.hint{font-size:10px;color:var(--fg3);margin-top:4px;line-height:1.5}.replay-status{font-size:11px;color:var(--amber);margin-top:8px;display:none}.toggle-row{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--fg2)}label.sw{position:relative;display:inline-block;width:32px;height:18px;cursor:pointer}label.sw input{display:none}.sw-track{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--border);border-radius:9px;transition:.2s}label.sw input:checked+.sw-track{background:var(--fg2)}.sw-thumb{position:absolute;width:12px;height:12px;background:var(--fg);border-radius:50%;top:3px;left:3px;transition:.2s}label.sw input:checked+.sw-track+.sw-thumb{left:17px}.prog-wrap{height:2px;background:var(--border);margin-bottom:8px}.prog-fill{height:100%;background:var(--fg);width:0;transition:width .4s}.prog-pct{font-size:20px;font-weight:600;color:var(--fg)}.missing-box{background:var(--bg);border:1px solid var(--border);padding:10px;font-size:11px;color:var(--red);max-height:120px;overflow-y:auto;line-height:2;margin-bottom:8px;word-break:break-all}#no-mode-msg{flex:1;display:flex;align-items:center;justify-content:center;color:var(--fg3);font-size:12px;letter-spacing:1px}@media (max-width: 700px){#send-sidebar,#recv-sidebar{width:100%;border-left:none;border-top:1px solid var(--border)}#sender-panel,#receiver-panel{flex-direction:column}}