*{margin:0;padding:0;box-sizing:border-box}html,body,#app{width:100%;height:100%;overflow:hidden}body{background:#1a1c22;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif}.viewer-root{position:relative;width:100vw;height:100vh;overflow:hidden;background:#1a1c22}.viewer-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none;touch-action:none}.info-overlay{position:absolute;top:16px;left:16px;max-width:60vw;padding:12px 16px;border-radius:12px;background:#14161c8c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;pointer-events:none}.info-title{font-size:16px;font-weight:600}.info-meta{margin-top:4px;font-size:12px;color:#ffffffb3}.info-desc{margin-top:6px;font-size:12px;color:#fff9;line-height:1.5;max-height:4.5em;overflow:hidden}.settings-panel{position:absolute;top:16px;right:16px;display:flex;flex-direction:column;gap:10px;padding:12px 14px;border-radius:12px;background:#14161c8c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer}.setting-label{font-size:12px;color:#ffffffd9}.setting-select{height:28px;min-width:96px;padding:0 8px;border-radius:8px;border:1px solid #3a3e48;background:#1a1c22;color:#fff;font-size:12px;outline:none;cursor:pointer}.setting-select:focus{border-color:#4c8dff}.switch{position:relative;display:inline-flex;width:38px;height:20px;flex:none}.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}.switch-track{width:38px;height:20px;border-radius:999px;background:#ffffff38;transition:background .15s}.switch-track:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s}.switch input:checked+.switch-track{background:#4c8dff}.switch input:checked+.switch-track:after{transform:translate(18px)}.controls{position:absolute;left:50%;bottom:28px;transform:translate(-50%);display:flex;gap:14px;padding:8px 14px;border-radius:999px;background:#14161c99;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.ctrl-btn{width:44px;height:44px;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;background:#ffffff1f;color:#fff;transition:background .15s}.ctrl-btn:hover{background:#ffffff3d}.ctrl-help{position:relative;display:flex;align-items:center}.ctrl-btn-help{width:34px;height:34px;background:#ffffff14;color:#ffffffbf}.ctrl-btn-help:hover{background:#ffffff2e;color:#fff}.help-tip{position:absolute;bottom:calc(100% + 12px);right:0;padding:10px 14px;border-radius:10px;white-space:nowrap;background:#14161cf2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#ffffffeb;font-size:12px;line-height:1.9;box-shadow:0 8px 24px #00000073;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .15s,transform .15s,visibility .15s;pointer-events:none}.help-tip:after{content:"";position:absolute;top:100%;right:14px;border:6px solid transparent;border-top-color:#14161cf2}.ctrl-help:hover .help-tip{opacity:1;visibility:visible;transform:translateY(0)}.center-panel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.center-panel .gate-card,.center-panel .error-card,.center-panel .gate-btn,.center-panel .gate-input{pointer-events:auto}.center-text{margin-top:14px;color:#ffffffd9;font-size:14px}.spinner{width:38px;height:38px;border-radius:50%;border:3px solid rgba(255,255,255,.18);border-top-color:#4c8dff;animation:spin .9s linear infinite}.center-panel{flex-direction:column}@keyframes spin{to{transform:rotate(360deg)}}.gate-card{display:flex;flex-direction:column;gap:12px;width:300px;padding:24px;border-radius:16px;background:#23262e;box-shadow:0 12px 40px #00000073;color:#fff}.gate-title{font-size:15px;font-weight:600}.gate-input{height:40px;padding:0 12px;border-radius:10px;border:1px solid #3a3e48;background:#1a1c22;color:#fff;outline:none;font-size:14px}.gate-input:focus{border-color:#4c8dff}.gate-err{color:#ff6b6b;font-size:12px}.gate-btn{height:40px;border:none;border-radius:10px;cursor:pointer;background:#4c8dff;color:#fff;font-size:14px;font-weight:500}.gate-btn:hover{background:#3d7bea}.error-card{padding:20px 28px;border-radius:14px;background:#23262e;color:#ffd0d0;font-size:15px;box-shadow:0 12px 40px #00000073}