:root{--bg-panel: rgba(15, 23, 42, .78);--border-panel: rgba(56, 189, 248, .25);--border-highlight: rgba(56, 189, 248, .8);--text-main: #f8fafc;--text-muted: #94a3b8;--color-red: #ef4444;--color-blue: #0ea5e9;--color-green: #10b981;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace}*{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none}html,body{width:100%;height:100%;overflow:hidden;background-color:#030712;font-family:var(--font-sans);color:var(--text-main)}#canvas-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}#hud-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;pointer-events:none}.glass-card{pointer-events:auto;position:absolute;background:var(--bg-panel);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-panel);border-radius:12px;padding:14px 18px;box-shadow:0 8px 32px #00000073;transition:all .2s ease}.hud-top-left{top:20px;left:20px}.hud-title-row{display:flex;align-items:center;gap:12px}.metro-icon-badge{width:36px;height:36px;background:linear-gradient(135deg,#ef4444,#0ea5e9);border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:20px;color:#fff;box-shadow:0 0 16px #0ea5e980}.hud-title{font-size:16px;font-weight:700;letter-spacing:.5px;color:#f8fafc}.hud-subtitle{font-size:11px;color:var(--text-muted);letter-spacing:.3px}.city-selector-row{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:8px;border-top:1px solid rgba(148,163,184,.18)}.selector-tag{font-size:11px;font-weight:700;color:#38bdf8}.city-btn{background:#1e293bbf;border:1px solid rgba(148,163,184,.25);color:var(--text-main);padding:4px 10px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;transition:all .15s ease}.city-btn:hover{background:#38bdf833;border-color:#38bdf8}.city-btn.active{background:#0284c7;border-color:#38bdf8;color:#fff;box-shadow:0 0 12px #38bdf873}.hud-top-right{top:20px;right:20px;padding:10px 14px}.hud-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}.hud-section-label{font-size:10px;font-weight:700;color:#38bdf8;letter-spacing:.5px}.mb-8{margin-bottom:8px}.btn-group{display:flex;gap:6px}.hud-btn{background:#1e293bb3;border:1px solid rgba(148,163,184,.2);color:var(--text-main);padding:6px 12px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s ease}.hud-btn:hover{background:#38bdf833;border-color:var(--border-highlight)}.hud-btn.active{background:#0284c7;border-color:#38bdf8;color:#fff;box-shadow:0 0 12px #38bdf866}.telemetry-card{bottom:24px;left:20px;width:300px}.telemetry-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.badge-line{font-size:12px;font-weight:700;padding:3px 8px;border-radius:4px}.badge-red{background:#ef444440;color:#f87171;border:1px solid #ef4444}.badge-orange{background:#f9731640;color:#fb923c;border:1px solid #f97316}.badge-blue{background:#0ea5e940;color:#38bdf8;border:1px solid #0ea5e9}.badge-green{background:#10b98140;color:#34d399;border:1px solid #10b981}.badge-status{font-size:11px;font-weight:600;padding:2px 6px;border-radius:4px}.badge-moving{background:#10b98133;color:#34d399}.badge-stopped{background:#f59e0b33;color:#fbbf24}.speedometer-container{display:flex;align-items:center;gap:14px;margin-bottom:12px}.speed-ring{display:flex;flex-direction:column;align-items:center;min-width:60px}.speed-number{font-family:var(--font-mono);font-size:32px;font-weight:800;line-height:1;color:#38bdf8;text-shadow:0 0 12px rgba(56,189,248,.6)}.speed-unit{font-size:10px;font-weight:700;color:var(--text-muted)}.speed-bar-wrap{flex:1;height:8px;background:#1e293bcc;border-radius:4px;overflow:hidden;border:1px solid rgba(148,163,184,.15)}.speed-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,#0ea5e9,#38bdf8);border-radius:4px;box-shadow:0 0 8px #38bdf8;transition:width .1s linear}.telemetry-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:#0f172a80;padding:8px 10px;border-radius:6px;margin-bottom:12px}.info-item{display:flex;flex-direction:column}.info-label{font-size:10px;color:var(--text-muted)}.info-val{font-size:13px;font-weight:600;font-family:var(--font-mono)}.train-selector{display:flex;flex-direction:column;gap:6px}.selector-label{font-size:11px;color:var(--text-muted)}.train-btn{background:#1e293bb3;border:1px solid rgba(148,163,184,.2);color:var(--text-main);padding:5px 8px;border-radius:6px;font-size:11px;cursor:pointer;flex:1}.train-btn.active{background:#38bdf840;border-color:#38bdf8;font-weight:700}.xray-card{bottom:24px;left:50%;transform:translate(-50%);width:380px;background:#0f172ae0;border:1px solid rgba(56,189,248,.4)}.xray-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.xray-title{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#38bdf8}.pulse-dot{width:8px;height:8px;background-color:#38bdf8;border-radius:50%;box-shadow:0 0 10px #38bdf8;animation:pulse 1.5s infinite}@keyframes pulse{0%{transform:scale(.95);box-shadow:0 0 #38bdf8b3}70%{transform:scale(1.15);box-shadow:0 0 0 8px #38bdf800}to{transform:scale(.95);box-shadow:0 0 #38bdf800}}.xray-toggle-btn{background:#38bdf826;border:1px solid #38bdf8;color:#38bdf8;font-weight:700;padding:5px 12px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:12px;transition:all .2s ease}.xray-toggle-btn.active{background:#0284c7;color:#fff;box-shadow:0 0 16px #38bdf899}.xray-slider-row{display:flex;align-items:center;gap:10px;margin-bottom:6px}.slider-label{font-size:11px;color:var(--text-muted)}.percent-label{font-family:var(--font-mono);font-size:12px;min-width:38px;text-align:right;color:#38bdf8;font-weight:700}.hud-range{flex:1;accent-color:#38bdf8;height:5px;border-radius:3px;cursor:pointer}.xray-tip{font-size:10px;color:#94a3b8;line-height:1.3}.camera-card{bottom:24px;right:20px;width:260px}.camera-title{font-size:12px;font-weight:700;margin-bottom:10px;color:var(--text-muted)}.camera-btn-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.cam-btn{background:#1e293bb3;border:1px solid rgba(148,163,184,.2);color:var(--text-main);padding:8px 6px;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;transition:all .15s ease}.cam-btn:hover{background:#38bdf833;border-color:#38bdf8}.cam-btn.active{background:#0284c7;border-color:#38bdf8;color:#fff;font-weight:700;box-shadow:0 0 12px #38bdf866}.cam-icon{font-size:16px}.side-zoom-panel{margin-top:10px;padding-top:10px;border-top:1px solid rgba(148,163,184,.18);animation:fadeIn .2s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.zoom-title-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.zoom-label{font-size:11px;font-weight:700;color:#38bdf8}.zoom-val{font-family:var(--font-mono);font-size:12px;font-weight:700;color:#f8fafc}.zoom-slider-row{display:flex;align-items:center;margin-bottom:8px}.zoom-presets{display:flex;gap:6px;margin-bottom:6px}.preset-btn{flex:1;background:#1e293bcc;border:1px solid rgba(56,189,248,.3);color:var(--text-main);padding:4px 6px;border-radius:4px;font-size:10px;cursor:pointer;transition:all .15s ease}.preset-btn:hover{background:#38bdf840;border-color:#38bdf8}.zoom-tip{font-size:10px;color:var(--text-muted);line-height:1.3}@media(max-width:900px){.xray-card{position:static;transform:none;width:100%}.telemetry-card,.camera-card{position:static;width:100%}#hud-overlay{padding:10px;display:flex;flex-direction:column;justify-content:space-between}}.hub-back-row{margin-top:8px;padding-top:8px;border-top:1px solid rgba(148,163,184,.18)}.hub-back{display:inline-block;text-decoration:none}.hub-back:hover{border-color:#38bdf899}