:root{--bg-color:#0b0c16;--panel-bg:#121424bf;--panel-border:#00f0ff40;--accent-cyan:#00f0ff;--accent-pink:#ff007f;--accent-yellow:#ffe600;--accent-purple:#9d00ff;--text-main:#f0f4fc;--text-dim:#7f8ca3}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0;padding:0}body,html{background-color:var(--bg-color);width:100%;height:100%;color:var(--text-main);font-family:Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,sans-serif;overflow:hidden}#app-container{flex-direction:column;width:100vw;height:100vh;display:flex;position:relative}#viewport-canvas{z-index:1;width:100%;height:100%;display:block;position:absolute;top:0;left:0}.cyber-panel{background:var(--panel-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--panel-border);border-radius:12px;box-shadow:0 8px 32px #00000073,inset 0 0 12px #00f0ff0d}#top-hud{z-index:10;justify-content:space-between;align-items:center;height:56px;padding:0 20px;display:flex;position:absolute;top:14px;left:18px;right:18px}.logo-area{align-items:center;gap:12px;display:flex}.logo-title{letter-spacing:2px;text-transform:uppercase;background:linear-gradient(90deg, var(--accent-cyan), var(--accent-pink));-webkit-text-fill-color:transparent;text-shadow:0 0 16px #00f0ff66;-webkit-background-clip:text;font-size:20px;font-weight:800}.logo-badge{color:var(--accent-pink);border:1px solid var(--accent-pink);letter-spacing:1px;background:#ff007f33;border-radius:10px;padding:2px 7px;font-size:10px;font-weight:700}.center-hud-controls{align-items:center;gap:10px;display:flex}.mode-tab-btn{color:var(--text-dim);cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:8px;align-items:center;gap:6px;padding:8px 16px;font-size:13px;font-weight:700;transition:all .2s;display:flex}.mode-tab-btn:hover{color:#fff;background:#00f0ff1a}.mode-tab-btn.active{border-color:var(--accent-cyan);color:#fff;background:linear-gradient(135deg,#00f0ff40,#9d00ff40);box-shadow:0 0 14px #00f0ff4d}.hud-actions{align-items:center;gap:10px;display:flex}.icon-btn{color:var(--text-main);cursor:pointer;background:#ffffff0d;border:1px solid #ffffff26;border-radius:8px;justify-content:center;align-items:center;padding:8px;transition:all .2s;display:flex}.icon-btn:hover{border-color:var(--accent-cyan);color:var(--accent-cyan);background:#00f0ff26;transform:translateY(-1px)}.icon-btn.active{background:var(--accent-pink);color:#fff;border-color:#f59;box-shadow:0 0 12px #ff007f80}.bullet-time-btn{color:#fa0;cursor:pointer;background:#ffaa001a;border:1px solid #fa06;border-radius:8px;align-items:center;gap:6px;padding:8px 14px;font-size:12px;font-weight:700;transition:all .2s;display:flex}.bullet-time-btn:hover,.bullet-time-btn.active{color:#000;background:#fa0;box-shadow:0 0 16px #fa09}#left-toolbox{z-index:10;flex-direction:column;gap:8px;width:64px;max-height:calc(100vh - 170px);padding:10px 8px;display:flex;position:absolute;top:84px;left:18px;overflow-y:auto}#left-toolbox::-webkit-scrollbar{width:4px}#left-toolbox::-webkit-scrollbar-thumb{background:var(--panel-border);border-radius:2px}.tool-item{width:48px;height:48px;color:var(--text-dim);cursor:pointer;background:#ffffff08;border:1px solid #ffffff14;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;transition:all .2s;display:flex;position:relative}.tool-item:hover{border-color:var(--accent-cyan);color:#fff;background:#00f0ff1f;transform:scale(1.05)}.tool-item.active{border-color:var(--accent-cyan);color:var(--accent-cyan);background:linear-gradient(135deg,#00f0ff4d,#0096ff4d);box-shadow:0 0 14px #00f0ff66}.tool-label{margin-top:3px;font-size:9px;font-weight:600}.tool-item:after{content:attr(data-tooltip);color:#fff;white-space:nowrap;pointer-events:none;opacity:0;border:1px solid var(--accent-cyan);z-index:20;background:#0a0c14f2;border-radius:4px;padding:4px 8px;font-size:11px;transition:opacity .2s;position:absolute;top:50%;left:60px;transform:translateY(-50%);box-shadow:0 4px 12px #00000080}.tool-item:hover:after{opacity:1}#bottom-gravity-bar{z-index:10;align-items:center;gap:8px;height:48px;padding:0 16px;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.gravity-label{color:var(--accent-cyan);align-items:center;gap:4px;margin-right:6px;font-size:12px;font-weight:700;display:flex}.gravity-btn{color:var(--text-dim);cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:6px;padding:6px 12px;font-size:12px;font-weight:600;transition:all .2s}.gravity-btn:hover{color:#fff;background:#00f0ff1a}.gravity-btn.active{background:var(--accent-cyan);color:#000;border-color:#fff;font-weight:700;box-shadow:0 0 12px #00f0ff80}#mission-panel{z-index:10;flex-direction:column;gap:12px;width:320px;padding:18px;display:flex;position:absolute;top:84px;right:18px}.mission-level-badge{color:var(--accent-yellow);letter-spacing:1px;text-transform:uppercase;font-size:11px;font-weight:800}.mission-title{color:#fff;font-size:16px;font-weight:700}.mission-desc{color:var(--text-dim);font-size:13px;line-height:1.4}.mission-hint{color:var(--accent-cyan);border-left:3px solid var(--accent-cyan);background:#00f0ff14;border-radius:0 6px 6px 0;padding:8px 10px;font-size:12px}.mission-progress-box{color:var(--accent-pink);background:#0000004d;border-radius:6px;padding:8px 12px;font-size:12px;font-weight:600}.mission-nav-btns{gap:8px;margin-top:6px;display:flex}.action-btn{cursor:pointer;border:none;border-radius:6px;flex:1;justify-content:center;align-items:center;gap:6px;padding:9px;font-size:12px;font-weight:700;transition:all .2s;display:flex}.action-btn.primary{background:linear-gradient(90deg, var(--accent-cyan), #09f);color:#000}.action-btn.primary:hover{transform:translateY(-1px);box-shadow:0 0 14px #00f0ff99}.action-btn.danger{border:1px solid var(--accent-pink);color:var(--accent-pink);background:#ff005526}.action-btn.danger:hover{background:var(--accent-pink);color:#fff}#victory-modal{text-align:center;z-index:100;opacity:0;pointer-events:none;width:360px;padding:30px;transition:all .3s cubic-bezier(.175,.885,.32,1.275);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.9)}#victory-modal.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)scale(1)}.victory-title{color:#0fc;text-shadow:0 0 20px #0fc9;margin-bottom:8px;font-size:24px;font-weight:800}.victory-desc{color:var(--text-dim);margin-bottom:20px;font-size:14px}#tip-banner{color:#ffffff80;pointer-events:none;z-index:5;background:#0000004d;border-radius:12px;padding:4px 12px;font-size:12px;position:absolute;bottom:74px;left:50%;transform:translate(-50%)}