:root{--bg:#0f1115;--panel:#161922;--panel-border:#262b38;--text:#e8eaf0;--text-dim:#96a0b5;--accent:#5b8cff;--good:#34d399;--warn:#fbbf24;--bad:#f87171;--mono:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;--technical:"JetBrains Mono", "IBM Plex Mono", "Space Mono", ui-monospace, var(--mono);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{background:var(--bg);min-height:100vh;color:var(--text);flex-direction:column;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;display:flex}#app{flex-direction:column;flex:1;width:100%;max-width:640px;margin:0 auto;padding:24px 16px;display:flex}.hero{--hero-size:3.2rem;flex-wrap:wrap;align-items:center;gap:28px;margin-bottom:24px;display:flex}.hero-left{flex-shrink:0;align-items:center;gap:16px;display:flex}.dots{width:var(--hero-size);height:var(--hero-size);flex-shrink:0;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);gap:12%;display:grid}.dots span{background:var(--accent);border-radius:50%}.digit-nine{width:calc(var(--hero-size) * .62);height:var(--hero-size);flex-shrink:0;margin:0;position:relative}.digit-nine .seg{background:var(--text);position:absolute}.digit-nine .seg-a,.digit-nine .seg-g,.digit-nine .seg-d{height:13%;left:10%;right:10%}.digit-nine .seg-a{top:0}.digit-nine .seg-g{top:43.5%}.digit-nine .seg-d{bottom:0}.digit-nine .seg-f,.digit-nine .seg-b,.digit-nine .seg-c{width:16%;height:38%}.digit-nine .seg-f{top:10%;left:0}.digit-nine .seg-b{top:10%;right:0}.digit-nine .seg-c{bottom:10%;right:0}.hero-right{flex:1;min-width:180px}.hero-right p{font-family:var(--technical);color:var(--text-dim);margin:0;font-size:.95rem;line-height:1.5}.panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;margin-bottom:16px;padding:14px 16px}.connect-panel>*{margin-bottom:14px}.connect-panel>:last-child{margin-bottom:0}.connect-body>*{margin-bottom:14px}.connect-body>:last-child{margin-bottom:0}.connect-panel.collapsed .connect-body,.connect-panel.collapsed .error-msg{display:none}.row-status{align-items:center;gap:8px;font-size:.9rem;display:flex}.row-status .status-text{flex:1}#collapseToggleBtn svg{transition:transform .15s}.connect-panel.collapsed #collapseToggleBtn svg{transform:rotate(-90deg)}.status-dot{background:var(--text-dim);border-radius:50%;flex-shrink:0;width:9px;height:9px}.status-dot.connecting{background:var(--warn)}.status-dot.connected{background:var(--good)}.status-dot.failed{background:var(--bad)}.status-text{font-weight:600}button{background:var(--accent);color:#0b0d12;cursor:pointer;white-space:nowrap;border:none;border-radius:8px;padding:10px 16px;font-size:.9rem;font-weight:600}button:disabled{opacity:.5;cursor:not-allowed}button:hover:not(:disabled){filter:brightness(1.08)}.icon-btn{color:var(--text-dim);border:1px solid var(--panel-border);background:0 0;justify-content:center;align-items:center;padding:9px;display:inline-flex}.icon-btn:hover{color:var(--text);border-color:var(--text-dim)}.row-qr{justify-content:center;padding:8px 0;display:flex}.qr-hover{flex-shrink:0;position:relative}.qr-hover canvas{background:#fff;border-radius:8px;max-width:100%;display:block;width:220px!important;height:220px!important}.big-code{font-family:var(--mono);letter-spacing:.14em;color:var(--text);text-align:center;margin:-4px 0 16px;font-size:1.8rem;font-weight:700}.row-join{align-items:center;gap:8px;display:flex}.row-join input{min-width:0;color:var(--text);border:1px solid var(--panel-border);font-family:var(--mono);letter-spacing:.08em;text-align:center;background:#0b0d12;border-radius:8px;flex:1;padding:10px;font-size:1rem}video{object-fit:cover;background:#000;border-radius:8px;width:220px;height:220px;display:block}.numpad{grid-template-columns:repeat(3,1fr);gap:10px;width:220px;display:grid}.numpad-key{color:var(--text);border:1px solid var(--panel-border);font-family:var(--mono);background:#0b0d12;border-radius:8px;padding:14px 0;font-size:1.1rem;font-weight:600}.numpad-key:hover{filter:none;border-color:var(--text-dim)}.numpad-clear{color:var(--text-dim)}label.row-wifi.checkbox{color:var(--text-dim);cursor:pointer;align-items:center;gap:4px;font-size:.85rem;display:flex}.tooltip{border:1px solid var(--text-dim);cursor:help;border-radius:50%;justify-content:center;align-items:center;width:15px;height:15px;margin-left:2px;font-size:.65rem;display:inline-flex;position:relative}.bubble{border:1px solid var(--panel-border);width:240px;color:var(--text);opacity:0;visibility:hidden;pointer-events:none;z-index:10;background:#0b0d12;border-radius:8px;padding:8px 10px;font-size:.75rem;line-height:1.4;transition:opacity .15s;position:absolute;bottom:130%;left:0}.tooltip:hover .bubble,.tooltip:focus .bubble,.qr-hover:hover .bubble,.qr-hover:focus .bubble{opacity:1;visibility:visible}.qr-bubble{width:200px;bottom:110%;left:0}.bubble-url{font-family:var(--mono);word-break:break-all;color:var(--text-dim);margin-top:4px;font-size:.68rem}.hidden{display:none!important}.text-panel{flex-direction:column;flex:1;display:flex}#sharedText{width:100%;min-height:300px;color:var(--text);border:1px solid var(--panel-border);resize:vertical;background:#0b0d12;border-radius:8px;flex:1;padding:12px;font-size:1rem;line-height:1.4}#sharedText.masked{-webkit-text-security:disc}.text-controls{align-items:center;gap:12px;margin-top:12px;display:flex}.text-controls .checkbox{color:var(--text-dim);cursor:pointer;align-items:center;gap:4px;font-size:.85rem;display:flex}.file-status{color:var(--text-dim);margin-top:8px;font-size:.85rem}.btn-small{padding:6px 12px;font-size:.8rem}button.secondary{color:var(--text);border:1px solid var(--panel-border);background:0 0}.error-msg{color:var(--bad);text-align:center;margin:8px 0 16px;font-size:.85rem}.site-footer{color:var(--text-dim);text-align:center;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:auto;padding-top:24px;font-size:.8rem;display:flex}.site-footer a{color:var(--text-dim);text-decoration:underline;-webkit-text-decoration-color:var(--panel-border);text-decoration-color:var(--panel-border);text-underline-offset:2px}.site-footer a:hover{color:var(--text);-webkit-text-decoration-color:var(--text-dim);text-decoration-color:var(--text-dim)}.footer-sep{opacity:.5}
