@font-face{font-family: 'Shabnam';src: url('../fonts/Shabnam.eot');src: url('../fonts/Shabnam.eot?#iefix') format('embedded-opentype'), url('../fonts/Shabnam.woff2') format('woff2'), url('../fonts/Shabnam.woff') format('woff'), url('../fonts/Shabnam.ttf') format('truetype');font-weight: normal;font-style: normal;font-display: swap}:root{--bg-color: #1a2332;--sidebar-bg: #151c28;--sidebar-border: #2a3a4d;--sidebar-text: #e0e0e0;--btn-bg: rgba(30, 42, 56, 0.9);--btn-border: #3a4a5d;--btn-text: #a0b0c0;--btn-hover-bg: rgba(40, 55, 75, 0.95);--btn-hover-text: #ffffff;--btn-hover-border: #5a7a9d;--tooltip-bg: linear-gradient(135deg, rgba(20, 30, 45, 0.95), rgba(30, 45, 65, 0.95));--tooltip-text: #e0e8f0;--tooltip-border: rgba(100, 140, 180, 0.3);--tooltip-arrow: rgba(30, 45, 65, 0.95);--shadow-color: rgba(0, 0, 0, 0.4);--ocean-color: #1a2332;--land-color: #3a4a5a;--land-stroke: #2a3a4a;--land-hover: #5a7a8a;--text-color: #8fa8c0}body.light-theme{--bg-color: #fafafa;--sidebar-bg: #ffffff;--sidebar-border: #e0e0e0;--sidebar-text: #333333;--btn-bg: rgba(255, 255, 255, 0.9);--btn-border: #cccccc;--btn-text: #555555;--btn-hover-bg: rgba(255, 255, 255, 1);--btn-hover-text: #333333;--btn-hover-border: #999999;--tooltip-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 245, 245, 0.98));--tooltip-text: #333333;--tooltip-border: rgba(0, 0, 0, 0.15);--tooltip-arrow: rgba(245, 245, 245, 0.98);--shadow-color: rgba(0, 0, 0, 0.15);--ocean-color: #9dc7e2;--land-color: #e1e0d0;--land-stroke: #c3c1a1;--land-hover: #c3c1a1;--text-color: #191919}*{margin: 0;padding: 0;box-sizing: border-box}html, body{width: 100%;height: 100%;overflow: hidden}body{display: flex;flex-direction: row;background-color: var(--bg-color);transition: background-color 0.3s ease}#sidebar{width: 300px;height: 100vh;background-color: var(--sidebar-bg);border-left: 1px solid var(--sidebar-border);padding: 20px;overflow-y: auto;box-shadow: -2px 0 8px var(--shadow-color);transition: all 0.3s ease;direction: rtl;font-family: 'Shabnam', 'Segoe UI', Arial, sans-serif}#sidebar h2{margin-bottom: 20px;color: var(--sidebar-text);font-size: 18px}.network-selection{margin-bottom: 30px}.network-selection h3{margin-bottom: 12px;color: var(--sidebar-text);font-size: 14px;font-weight: 600}.network-list{list-style: none;padding: 0;margin: 0}.network-item{padding: 10px 15px;margin-bottom: 8px;background-color: var(--btn-bg);border: 1px solid var(--btn-border);border-radius: 6px;cursor: pointer;transition: all 0.2s ease;color: var(--btn-text);font-size: 14px}.network-item:hover{background-color: var(--btn-hover-bg);color: var(--btn-hover-text);border-color: var(--btn-hover-border);transform: translateX(-3px)}.network-item.selected{background-color: var(--btn-hover-bg);color: var(--btn-hover-text);border-color: var(--btn-hover-border);font-weight: 600;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)}.traffic-legend{margin-top: 30px;padding-top: 20px;border-top: 1px solid var(--sidebar-border)}.traffic-legend h3{margin-bottom: 12px;color: var(--sidebar-text);font-size: 14px;font-weight: 600}.legend-item{display: flex;align-items: center;margin-bottom: 10px;gap: 10px}.legend-line{width: 30px;height: 3px;border-radius: 2px;box-shadow: 0 0 6px currentColor}.legend-line.green{background: #6bcb77;color: #6bcb77}.legend-line.orange{background: #ffa500;color: #ffa500}.legend-line.red{background: #ff4757;color: #ff4757}.legend-text{font-size: 12px;color: var(--sidebar-text)}.live-indicator{position: absolute;top: 20px;right: 20px;background: var(--sidebar-bg);border: 1px solid var(--sidebar-border);border-radius: 8px;padding: 8px 14px;display: flex;align-items: center;gap: 8px;z-index: 100;box-shadow: 0 2px 8px var(--shadow-color);direction: rtl;font-family: 'Shabnam', 'Segoe UI', Arial, sans-serif}.live-dot{width: 10px;height: 10px;background: #6bcb77;border-radius: 50%;animation: live-pulse 1.5s ease-in-out infinite;box-shadow: 0 0 8px #6bcb77}@keyframes live-pulse{0%, 100%{transform: scale(1);opacity: 1}50%{transform: scale(1.3);opacity: 0.7}}.live-text{font-size: 13px;color: var(--sidebar-text);font-weight: 600}#svg-container{flex: 1;height: 100vh;width: 100%;display: flex;position: relative;overflow: hidden;cursor: grab;touch-action: none;-webkit-user-select: none;user-select: none;background-color: var(--ocean-color);transition: background-color 0.3s ease}#svg-container:active{cursor: grabbing}#svg-container svg{width: 100%;height: 100%;display: block;touch-action: none}.theme-toggle{position: absolute;top: 20px;left: 20px;z-index: 100}.theme-btn{width: 44px;height: 44px;background-color: var(--btn-bg);border: 1px solid var(--btn-border);border-radius: 50%;cursor: pointer;display: flex;align-items: center;justify-content: center;font-size: 20px;color: var(--btn-text);user-select: none;box-shadow: 0 2px 8px var(--shadow-color);transition: all 0.3s ease}.theme-btn:hover{background-color: var(--btn-hover-bg);color: var(--btn-hover-text);border-color: var(--btn-hover-border);transform: scale(1.05)}.theme-btn:active{transform: scale(0.95)}.theme-btn .sun-icon{display: block}.theme-btn .moon-icon{display: none}body.light-theme .theme-btn .sun-icon{display: none}body.light-theme .theme-btn .moon-icon{display: block}.zoom-controls{position: absolute;top: 65px;right: 20px;z-index: 100;display: flex;flex-direction: column;gap: 5px}.zoom-btn{width: 40px;height: 40px;background-color: var(--btn-bg);border: 1px solid var(--btn-border);border-radius: 4px;cursor: pointer;display: flex;align-items: center;justify-content: center;font-size: 20px;font-weight: bold;color: var(--btn-text);user-select: none;box-shadow: 0 2px 8px var(--shadow-color);transition: all 0.3s ease}.zoom-btn:hover{background-color: var(--btn-hover-bg);color: var(--btn-hover-text);border-color: var(--btn-hover-border)}.wm-txt{position: fixed;bottom: 12px;left: 12px;font-size: 11px;color: #8a9bb3;opacity: 0.85;pointer-events: none;z-index: 50;font-family: 'Segoe UI', Arial, sans-serif;letter-spacing: 0.3px}body.light-theme .wm-txt{color: #1a3a5c;text-shadow: none}.zoom-btn:active{transform: scale(0.95)}.heartbeat-point{stroke: none;cursor: pointer;pointer-events: auto !important;z-index: 1000;transition: filter 0.2s ease;will-change: transform;transform-box: fill-box;transform-origin: center}.heartbeat-point:hover{filter: brightness(1.3) drop-shadow(0 0 12px currentColor) !important}.pulse-ring{fill: none;stroke-width: 2;pointer-events: none;opacity: 0;will-change: transform, opacity;transform-box: fill-box;transform-origin: center}.heartbeat-group.animating .pulse-ring{animation: ripple 2s infinite ease-out}@keyframes ripple{0%{transform: scale(1);opacity: 0.7;stroke-width: 2}100%{transform: scale(3.3);opacity: 0;stroke-width: 0.5}}.heartbeat-glow{pointer-events: none;opacity: 0.3;will-change: transform, opacity;transform-box: fill-box;transform-origin: center}.heartbeat-group.animating .heartbeat-glow{animation: glow-pulse 1.5s infinite ease-in-out}@keyframes glow-pulse{0%, 100%{transform: scale(1);opacity: 0.3}50%{transform: scale(1.375);opacity: 0.5}}.heartbeat-group.animating .heartbeat-point{animation: core-pulse 1.5s infinite ease-in-out}@keyframes core-pulse{0%, 100%{transform: scale(1)}50%{transform: scale(1.2)}}.traffic-line{fill: none;stroke-linecap: round;pointer-events: none;opacity: 0}.traffic-line.active{animation: traffic-flow 3s ease-in-out forwards}@keyframes traffic-flow{0%{stroke-dashoffset: 100%;opacity: 0}10%{opacity: 0.9}75%{stroke-dashoffset: 0%;opacity: 0.9}100%{stroke-dashoffset: 0%;opacity: 0}}.traffic-line-glow{fill: none;stroke-linecap: round;pointer-events: none;filter: blur(3px);opacity: 0}.traffic-line-glow.active{animation: traffic-glow 3s ease-in-out forwards}@keyframes traffic-glow{0%{stroke-dashoffset: 100%;opacity: 0}10%{opacity: 0.5}75%{stroke-dashoffset: 0%;opacity: 0.5}100%{stroke-dashoffset: 0%;opacity: 0}}.tooltip{position: absolute;background: var(--tooltip-bg);color: var(--tooltip-text);padding: 10px 14px;border-radius: 6px;font-size: 13px;font-family: 'Segoe UI', Arial, sans-serif;pointer-events: none;z-index: 1000;display: none;white-space: nowrap;box-shadow: 0 4px 20px var(--shadow-color);border: 1px solid var(--tooltip-border);transition: background 0.3s ease, color 0.3s ease}.tooltip::after{content: '';position: absolute;bottom: -6px;left: 50%;transform: translateX(-50%);border-width: 6px 6px 0 6px;border-style: solid;border-color: var(--tooltip-arrow) transparent transparent transparent}.sidebar-toggle{position: absolute;top: 20px;right: 80px;z-index: 101;display: none}.sidebar-toggle-btn{width: 44px;height: 44px;background-color: var(--btn-bg);border: 1px solid var(--btn-border);border-radius: 50%;cursor: pointer;display: flex;align-items: center;justify-content: center;font-size: 20px;color: var(--btn-text);user-select: none;box-shadow: 0 2px 8px var(--shadow-color);transition: all 0.3s ease}.sidebar-toggle-btn:hover{background-color: var(--btn-hover-bg);color: var(--btn-hover-text);border-color: var(--btn-hover-border);transform: scale(1.05)}.sidebar-toggle-btn:active{transform: scale(0.95)}.sidebar-overlay{display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);z-index: 199;opacity: 0;transition: opacity 0.3s ease}.sidebar-overlay.active{opacity: 1}@media (max-width: 768px){.sidebar-toggle{display: block;right: 15px;top: 15px}.live-indicator{right: 65px;top: 15px}.sidebar-overlay{display: block;pointer-events: none}.sidebar-overlay.active{pointer-events: auto}#svg-container{overflow: auto;-webkit-overflow-scrolling: touch}#svg-container svg{width: auto;height: auto;min-width: 100%;min-height: 100vh}#sidebar{position: fixed;top: 0;right: -320px;width: 280px;height: 100vh;z-index: 200;transition: right 0.3s ease}#sidebar.open{right: 0}.sidebar-close{display: flex;position: absolute;top: 15px;right: 15px;width: 32px;height: 32px;background-color: var(--btn-bg);border: 1px solid var(--btn-border);border-radius: 50%;cursor: pointer;align-items: center;justify-content: center;font-size: 18px;color: var(--btn-text);transition: all 0.2s ease}.sidebar-close:hover{background-color: var(--btn-hover-bg);color: var(--btn-hover-text)}.zoom-controls{right: 15px;top: 65px}.sidebar-toggle.hidden{opacity: 0;pointer-events: none}.theme-toggle{left: 15px;top: 15px}.theme-btn,.sidebar-toggle-btn{width: 40px;height: 40px;font-size: 18px}.zoom-btn{width: 36px;height: 36px;font-size: 18px}}@media (max-width: 926px) and (orientation: landscape){.sidebar-toggle{display: block;right: 15px;top: 15px}.live-indicator{right: 65px;top: 15px}.sidebar-overlay{display: block;pointer-events: none}.sidebar-overlay.active{pointer-events: auto}#sidebar{position: fixed;top: 0;right: -320px;width: 280px;height: 100vh;z-index: 200;transition: right 0.3s ease}#sidebar.open{right: 0}.sidebar-close{display: flex}#svg-container svg{width: 100%;height: 100vh;min-width: auto}.zoom-controls{right: 15px;top: 65px}}.mobile-hint{display: none;position: fixed;bottom: 20px;left: 50%;transform: translateX(-50%);background-color: var(--btn-bg);color: var(--btn-text);padding: 10px 16px;border-radius: 20px;font-size: 12px;font-family: 'Segoe UI', Arial, sans-serif;box-shadow: 0 2px 10px var(--shadow-color);z-index: 50;opacity: 0;transition: opacity 0.5s ease;pointer-events: none;border: 1px solid var(--btn-border)}.mobile-hint.show{opacity: 1}@media (max-width: 768px) and (orientation: portrait){.mobile-hint{display: block}}@media (max-width: 480px){#sidebar{width: 260px;right: -280px;padding: 15px}#sidebar.open{right: 0}.sidebar-toggle{right: 10px;top: 15px}.live-indicator{right: 56px;top: 15px;padding: 6px 10px;font-size: 12px}.zoom-controls{top: 60px;right: 10px;gap: 3px}.zoom-btn{width: 32px;height: 32px;font-size: 16px}.theme-btn,.sidebar-toggle-btn{width: 36px;height: 36px;font-size: 16px}.tooltip{font-size: 11px;padding: 8px 10px}}.sidebar-close{display: none}