*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background:#0b1020;font-family:Segoe UI,PingFang HK,Noto Sans TC,sans-serif;color:#e8ecf8}#c{display:block;width:100%;height:100%}#ui{pointer-events:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:2}#ui header{pointer-events:none;position:absolute;top:16px;left:20px;text-shadow:0 2px 12px rgba(0,0,0,.6)}#ui header h1{font-size:1.35rem;font-weight:700;letter-spacing:.02em}#ui header .sub{font-size:.85rem;opacity:.75;margin-top:2px}#roster-panel{pointer-events:auto;position:absolute;top:16px;right:16px;width:260px;max-height:calc(100% - 80px);overflow:auto;background:#0c1224d1;border:1px solid rgba(120,140,200,.25);border-radius:12px;padding:12px 12px 8px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 32px #00000059}#roster-panel h2{font-size:.9rem;margin-bottom:8px;opacity:.9}#roster-list{list-style:none;font-size:.78rem}#roster-list li{display:flex;align-items:center;gap:8px;padding:5px 4px;border-radius:6px;cursor:pointer}#roster-list li:hover{background:#ffffff0f}#roster-list .swatch{width:12px;height:12px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 1px #ffffff40}#roster-list .name{flex:1;line-height:1.25}#roster-list .acc{opacity:.55;font-size:.7rem}#hud{position:absolute;bottom:14px;left:50%;transform:translate(-50%);background:#0a0e1cbf;border:1px solid rgba(120,140,200,.2);border-radius:999px;padding:8px 16px;font-size:.75rem;opacity:.9;white-space:nowrap;max-width:95vw;overflow:hidden;text-overflow:ellipsis}#tooltip{pointer-events:none;position:absolute;left:0;top:0;background:#080c18eb;border:1px solid rgba(160,180,255,.35);border-radius:10px;padding:10px 12px;min-width:160px;box-shadow:0 8px 24px #0006;transform:translate(-50%,-120%)}#tooltip strong{display:block;font-size:.9rem;margin-bottom:2px}#tooltip span{font-size:.75rem;opacity:.75}#gate{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#162038,#0b1020 70%)}#gate[hidden]{display:none!important}#gate-card{width:min(360px,92vw);background:#0c1224eb;border:1px solid rgba(120,140,200,.3);border-radius:16px;padding:28px 24px 22px;box-shadow:0 16px 48px #00000073;text-align:center}#gate-card h1{font-size:1.2rem;margin-bottom:6px}#gate-card .hint{font-size:.85rem;opacity:.7;margin-bottom:18px}#gate-form{display:flex;flex-direction:column;gap:10px}#gate-input{font-size:1rem;padding:10px 12px;border-radius:8px;border:1px solid rgba(120,140,200,.35);background:#00000059;color:#e8ecf8;outline:none;text-align:center;letter-spacing:.08em}#gate-input:focus{border-color:#60a0ffb3}#gate-form button{font-size:1rem;padding:10px 14px;border-radius:8px;border:none;background:#3a6cf0;color:#fff;cursor:pointer;font-weight:600}#gate-form button:hover{background:#4a7cff}#gate-error{color:#f07070;font-size:.85rem;margin-top:4px}#gate-error[hidden]{display:none!important}#roster-list .status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-left:4px;box-shadow:0 0 0 1px #00000059}#roster-list .status-dot.idle{background:#6a7388}#roster-list .status-dot.busy{background:#ff6a00;box-shadow:0 0 8px #ff6a00cc;animation:pulse-busy 1s ease-in-out infinite}#roster-list .status-dot.done{background:#2ecc71}#roster-list li[data-status=busy]{background:#ff6a0014}@keyframes pulse-busy{0%,to{opacity:1}50%{opacity:.45}}#conn-pill{position:absolute;top:16px;left:50%;transform:translate(-50%);font-size:.72rem;padding:4px 12px;border-radius:999px;background:#0c1224cc;border:1px solid rgba(120,140,200,.25);opacity:.85}