:root{--bg: #f5f7fa;--panel: #ffffff;--border: #e2e8f0;--text: #1e293b;--muted: #64748b;--primary: #2f6fed;--primary-dark: #1d4fc4;--danger: #dc2626;--ok: #16a34a}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;font-family:Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;background:var(--bg);color:var(--text);overscroll-behavior:none;-webkit-tap-highlight-color:transparent}.app{display:flex;flex-direction:column;height:100%}@supports (height: 100dvh){.app{height:100dvh}}.topbar{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--border)}.topbar .logo{font-weight:700;font-size:16px}.topbar .logo span{color:var(--primary)}.topbar .spacer{flex:1}.badge{font-size:12px;padding:2px 10px;border-radius:10px;background:#eef2ff;color:var(--primary)}.badge.ok{background:#dcfce7;color:var(--ok)}.badge.err{background:#fee2e2;color:var(--danger)}.main{flex:1;display:flex;min-height:0}.panel{width:360px;background:var(--panel);border-right:1px solid var(--border);padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}.panel h3{margin:0 0 4px;font-size:14px}.field{display:flex;flex-direction:column;gap:4px}.field label{font-size:12px;color:var(--muted)}.field input,.field select{padding:8px 10px;border:1px solid var(--border);border-radius:6px;font-size:13px;outline:none;background:#fff;color:var(--text)}.field input:focus{border-color:var(--primary)}.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.btn{padding:9px 14px;border:none;border-radius:6px;cursor:pointer;font-size:13px;background:var(--primary);color:#fff}.btn:hover{background:var(--primary-dark)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.ghost{background:#eef2f7;color:var(--text)}.btn.ghost:hover{background:#dfe7f0}.btn.danger{background:var(--danger)}.logbox{flex:1;min-height:140px;overflow-y:auto;background:#0f172a;color:#cbd5e1;border-radius:8px;padding:10px;font-family:Consolas,monospace;font-size:12px;line-height:1.5}.logbox .err{color:#f87171}.screen-area{flex:1;display:flex;flex-direction:column;min-width:0;background:#111827;position:relative}.screen-stage{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:0;position:relative}.ime-proxy{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;border:0;padding:0;margin:0;resize:none;outline:none;overflow:hidden;background:transparent;color:transparent;pointer-events:none;z-index:1}.screen-stage canvas.video-canvas{background:#000;outline:none;max-width:100%;max-height:100%;box-shadow:0 0 0 1px #ffffff14;cursor:default;touch-action:none}.wall-bar{position:absolute;top:8px;right:10px;z-index:6;display:flex;gap:3px;align-items:center;background:#0f1622c7;padding:4px;border-radius:8px;backdrop-filter:blur(6px)}.wall-bar button{background:transparent;color:#dfe8f4;border:1px solid transparent;border-radius:6px;padding:4px 10px;font-size:12px;cursor:pointer}.wall-bar button:hover{background:#ffffff14}.wall-bar button.on{background:var(--primary);color:#fff}.wall-bar button.add{color:#9ecbff;font-size:14px;padding:4px 8px}.wall-wrap{position:absolute;inset:0;padding:44px 8px 8px}.wall-grid{display:grid;gap:6px;width:100%;height:100%;grid-auto-rows:1fr}.wall-tile{position:relative;background:#000;border:1px solid rgba(255,255,255,.09);border-radius:8px;overflow:hidden;cursor:pointer;min-height:0;min-width:0}.wall-tile:hover{border-color:var(--primary)}.wall-tile .video-slot{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.wall-tile .video-slot canvas{width:100%;height:100%;object-fit:contain;background:#000}.wall-label{position:absolute;left:8px;bottom:6px;z-index:2;background:#0009;color:#fff;font-size:12px;padding:2px 8px;border-radius:6px;display:flex;gap:6px;align-items:center;max-width:calc(100% - 16px)}.wall-label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wall-label .dot{width:7px;height:7px;border-radius:50%;flex:none;background:#9ca3af}.wall-label .dot[data-status=connected]{background:#34d399}.wall-label .dot[data-status=connecting]{background:#fbbf24}.wall-stats{position:absolute;right:8px;bottom:6px;z-index:2;background:#0009;color:#cbd5e1;font-size:11px;padding:2px 7px;border-radius:6px}.wall-status{position:absolute;top:8px;left:8px;z-index:2;background:#0009;color:#fbbf24;font-size:12px;padding:2px 8px;border-radius:6px}.wall-tile.empty{display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;color:var(--muted);border-style:dashed;background:#ffffff05;font-size:12px}.wall-tile.empty:hover{color:var(--primary)}.wall-tile.empty .wall-add{font-size:26px;line-height:1}.panel-overlay{position:fixed;inset:0;z-index:60;background:#0000008c;display:flex;align-items:center;justify-content:center;padding:16px}.panel-overlay-inner{background:#16202e;border-radius:12px;width:100%;max-width:430px;max-height:86vh;overflow:auto;padding:0 14px 14px;box-shadow:0 12px 40px #00000080}.panel-overlay-head{display:flex;justify-content:space-between;align-items:center;padding:12px 2px;font-weight:600;position:sticky;top:0;background:#16202e}.panel-overlay-head button{background:none;border:none;color:var(--muted);font-size:16px;cursor:pointer;padding:4px 8px}.toolbar{position:absolute;top:0;left:50%;transform:translate(-50%,-120%);opacity:0;pointer-events:none;display:flex;gap:6px;align-items:center;background:#fffffff5;border-radius:8px;padding:6px 10px;box-shadow:0 4px 16px #00000040;flex-wrap:wrap;z-index:8;transition:transform .18s ease,opacity .18s ease;max-width:calc(100% - 24px)}.toolbar.show{transform:translate(-50%,8px);opacity:1;pointer-events:auto}.ui-hotzone{position:absolute;top:0;left:0;right:0;height:12px;z-index:7;display:none}@media (hover: hover){.ui-hotzone{display:block}}.ui-handle{position:absolute;top:0;left:50%;transform:translate(-50%);width:68px;height:16px;padding:0;border:none;border-radius:0 0 10px 10px;cursor:pointer;background:#ffffff47;z-index:9;transition:background .18s ease}.ui-handle:after{content:"";position:absolute;left:50%;top:6px;transform:translate(-50%);width:26px;height:3px;border-radius:2px;background:#ffffffd9}.ui-handle:hover{background:#ffffff80}.ui-fab{position:absolute;right:12px;bottom:12px;width:44px;height:44px;border-radius:50%;border:none;background:#2f6fedeb;color:#fff;font-size:18px;box-shadow:0 4px 14px #00000059;z-index:9;display:none;align-items:center;justify-content:center;cursor:pointer}.only-mobile{display:none!important}.toolbar button,.toolbar select{border:1px solid var(--border);background:#fff;color:var(--text);border-radius:6px;padding:5px 10px;font-size:12px;cursor:pointer}.toolbar button:hover{background:#eef2f7}.toolbar .sep{width:1px;height:18px;background:var(--border)}.statusbar{background:var(--panel);border-top:1px solid var(--border);padding:6px 14px;font-size:12px;color:var(--muted);display:flex;gap:16px;align-items:center}.placeholder{flex:1;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;color:#9ca3af}.placeholder .big{font-size:42px}.password-prompt{position:absolute;z-index:10;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--panel);padding:20px;border-radius:10px;box-shadow:0 8px 30px #0000004d;display:flex;flex-direction:column;gap:10px;min-width:300px}@media (max-width: 820px){.topbar{padding:8px 12px;gap:6px}.topbar .logo{font-size:14px}.main{flex-direction:column}.panel{width:100%;border-right:none;border-bottom:1px solid var(--border);max-height:46vh;padding:12px}.app.connected .panel,.app.connected .topbar{display:none}.statusbar{gap:10px;padding:6px 10px;font-size:11px;flex-wrap:wrap}.statusbar .hint{display:none}.toolbar{inset:auto 8px 0;transform:translateY(130%);justify-content:center;padding:8px;gap:8px}.toolbar.show{transform:translateY(-8px)}.toolbar button,.toolbar select{padding:9px 12px;font-size:13px}.toolbar .sep,.ui-handle{display:none}.ui-fab{display:flex}.only-mobile{display:inline-block!important}.password-prompt{min-width:0;width:calc(100% - 40px)}.placeholder .logbox{width:100%!important;height:140px!important}.wall-bar{top:6px;right:6px;padding:3px}.wall-bar button{padding:7px 11px;font-size:13px}.wall-wrap{padding:52px 6px 6px}.wall-label-text{max-width:130px}}.ui-fab.hide{display:none!important}.cursor-overlay{position:absolute;inset:0;pointer-events:none;z-index:3}