:root{--accent: #7c6af7;--accent2: #5de8c1;--danger: #f87171;--success: #4ade80}[data-theme=light]{--bg: #f8f9fc;--surface: #ffffff;--border: #e2e4ef;--text: #1a1d27;--muted: #6b7280}[data-theme=dark]{--bg: #0f1117;--surface: #1a1d27;--border: #2e3347;--text: #e2e4ef;--muted: #6b7280}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{overflow-x:hidden}body{background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,sans-serif;min-height:100vh;overflow-x:hidden}.app-header{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1rem;border-bottom:1px solid var(--border);gap:.75rem;position:sticky;top:0;background:var(--surface);z-index:10}.header-left{display:flex;align-items:center;gap:.6rem;min-width:0}.logo{font-size:1.2rem;font-weight:700;letter-spacing:-.02em;color:var(--accent);flex-shrink:0}.main{max-width:780px;margin:0 auto;padding:1rem;display:flex;flex-direction:column;gap:1rem}.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1rem}@media(min-width:600px){.card{padding:1.25rem 1.5rem}}.card h2{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.75rem}button{padding:.45rem .9rem;border-radius:6px;border:none;font-size:.83rem;font-weight:600;cursor:pointer;transition:opacity .15s,transform .1s;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;white-space:nowrap;background:var(--border);color:var(--text)}button:active{transform:scale(.97)}button:disabled{opacity:.4;cursor:not-allowed}button:hover:not(:disabled){opacity:.85}.btn{background:var(--accent);color:#fff}.btn-sm{padding:.3rem .6rem;font-size:.75rem;background:var(--border);color:var(--text);border-radius:5px}.btn-sm.active{background:var(--accent);color:#fff}.btn-sm.danger{background:#450a0a;color:var(--danger)}.server-pill{background:var(--bg);border:1px solid var(--border);border-radius:8px;font-size:.8rem;font-weight:600;padding:.35rem .7rem;display:flex;align-items:center;gap:.4rem;max-width:200px;overflow:hidden;white-space:nowrap}.ws-dot{font-size:.65rem;flex-shrink:0}.ws-connected{color:var(--success)}.ws-connecting{color:#fb923c}.ws-disconnected{color:var(--muted)}.theme-toggle{display:flex;gap:.2rem;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:.2rem;flex-shrink:0}.theme-toggle button{padding:.25rem .45rem;border-radius:6px;background:transparent;color:var(--muted);font-size:.75rem}.theme-toggle button.active{background:var(--accent);color:#fff}.panel-top{display:flex;gap:.5rem;align-items:center;margin-bottom:.5rem;flex-wrap:wrap}.ns-row{flex:1;min-width:0}.ns-input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:.83rem;padding:.4rem .7rem;outline:none}.ns-input:focus{border-color:var(--accent)}.panel-actions{display:flex;gap:.4rem;flex-shrink:0}.clipboard-area{width:100%;min-height:200px;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:JetBrains Mono,Fira Code,monospace;font-size:.83rem;padding:.7rem;resize:vertical;outline:none;line-height:1.6}@media(min-width:600px){.clipboard-area{min-height:260px}}.clipboard-area:focus{border-color:var(--accent)}.panel-bottom{margin-top:.5rem;display:flex;flex-direction:column;gap:.4rem}.bottom-actions{display:flex;gap:.4rem;flex-wrap:wrap}.sync-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.sync-row select{background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:.78rem;padding:.3rem .6rem;outline:none;cursor:pointer}.sync-row select:focus{border-color:var(--accent)}.last-sync{font-size:.72rem}.qr-section{margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--border)}.qr-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}.qr-wrap canvas{border-radius:8px;max-width:100%}.coords{font-size:.9rem;font-weight:600;margin-bottom:.5rem}.gps-ready{display:flex;flex-direction:column;gap:.6rem}.format-picker{display:flex;flex-wrap:wrap;gap:.4rem}.format-opt{display:flex;align-items:center;gap:.3rem;font-size:.8rem;cursor:pointer;padding:.3rem .6rem;border:1px solid var(--border);border-radius:6px;background:var(--bg)}.format-opt.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}.format-opt input[type=radio]{display:none}.formatted-url{display:block;font-size:.75rem;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:.4rem .7rem;word-break:break-all;color:var(--muted)}.gps-actions{display:flex;gap:.5rem;flex-wrap:wrap}.share-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}.drawer-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;display:flex;justify-content:flex-end;z-index:200}.drawer{background:var(--surface);border-left:1px solid var(--border);width:min(380px,100vw);height:100%;overflow-y:auto;display:flex;flex-direction:column;padding:1rem;gap:.75rem}.drawer-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:.75rem;border-bottom:1px solid var(--border)}.drawer-header h2{font-size:1rem;font-weight:700;letter-spacing:0;text-transform:none;color:var(--text);margin:0}.server-list{list-style:none;display:flex;flex-direction:column;gap:.4rem;flex:1}.server-list li{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem .6rem;border:1px solid var(--border);border-radius:8px;background:var(--bg)}.server-list li.active{border-color:var(--accent)}.server-name{flex:1;text-align:left;font-size:.83rem;background:transparent;border:none;color:var(--text);cursor:pointer;padding:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.server-meta-actions{display:flex;gap:.3rem;flex-shrink:0}.server-form{display:flex;flex-direction:column;gap:.5rem}.server-form h3{font-size:.95rem;font-weight:700}.server-form label{display:flex;flex-direction:column;gap:.25rem;font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}.server-form input{background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:.85rem;padding:.45rem .75rem;outline:none;font-family:inherit}.server-form input:focus{border-color:var(--accent)}.form-actions{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.25rem}.form-actions .btn{flex:1;justify-content:center}.toast-container{position:fixed;top:1rem;right:1rem;z-index:999;display:flex;flex-direction:column;gap:.4rem;pointer-events:none;max-width:min(280px,calc(100vw - 2rem))}.toast{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:.4rem .85rem;font-size:.8rem;color:var(--text);box-shadow:0 2px 10px #00000038;pointer-events:auto;cursor:pointer}.toast-ok{border-color:var(--success);color:var(--success)}.toast-err{border-color:var(--danger);color:var(--danger)}.server-badge{display:inline-block;font-size:.65rem;font-weight:700;letter-spacing:.04em;padding:.1em .35em;border-radius:3px;background:var(--accent);color:#fff;margin-left:.4rem;vertical-align:middle;opacity:.85}.server-type-toggle{display:flex;gap:.4rem;margin-bottom:.75rem}.topic-chip{display:inline-flex;align-items:center;background:var(--border);border-radius:6px;padding:.25rem .6rem;font-size:.8rem;font-family:monospace;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.key-row{display:flex;gap:.4rem;align-items:stretch;flex-wrap:wrap}.key-row .key-input{flex:1;min-width:0}.key-warning{font-size:.78rem;color:var(--danger);margin:.25rem 0 .5rem}.key-share-row{display:flex;align-items:center;gap:.4rem;margin-top:.35rem;flex-wrap:wrap}.key-b58{flex:1;min-width:0;font-size:.7rem;word-break:break-all;background:var(--border);padding:.25em .45em;border-radius:4px;-webkit-user-select:all;user-select:all;cursor:text}.key-hint{margin:.25rem 0 0}.scanner-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:300}.scanner-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.25rem;display:flex;flex-direction:column;align-items:center;gap:.75rem;width:min(420px,calc(100vw - 2rem))}.scanner-label{font-size:.8rem;color:var(--muted);text-align:center}.scanner-video{width:100%;border-radius:8px;background:#000}.key-qr-canvas{border-radius:8px;max-width:100%}.scan-toggle{display:inline-flex;align-items:center;gap:.3rem;font-size:.75rem;font-weight:600;color:var(--text);cursor:pointer;padding:.3rem .4rem;-webkit-user-select:none;user-select:none}.scan-toggle input[type=checkbox]{accent-color:var(--accent);cursor:pointer}.muted{color:var(--muted);font-size:.8rem}.err{color:var(--danger);font-size:.8rem}.ok{color:var(--success);font-size:.8rem}code{background:var(--border);padding:.1em .3em;border-radius:4px;font-family:monospace;font-size:.85em}