地图支持放大

public/css/style.css

@@ -1982,4 +1982,67 @@ input:checked+.slider:before {
   .stat-cards {
     grid-template-columns: 1fr;
   }
+}
+
+/* ---- Globe Card Expansion ---- */
+.globe-card.expanded {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 95vw !important;
+    height: 90vh !important;
+    z-index: 2000;
+    box-shadow: 0 0 100px rgba(0, 0, 0, 0.8), 0 0 0 100vh rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(15px);
+    animation: globeExpand 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+    margin: 0 !important;
+}
+
+@keyframes globeExpand {
+    from {
+        opacity: 0;
+        transform: translate(-50%, -45%) scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1);
+    }
+}
+
+.globe-card.expanded .globe-body {
+    height: calc(100% - 130px) !important;
+}
+
+.chart-header-actions {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+.btn-icon {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--border-color);
+    color: var(--text-muted);
+    cursor: pointer;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-sm);
+    transition: all 0.2s;
+    outline: none;
+}
+
+.btn-icon:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: var(--text-primary);
+    border-color: var(--accent-indigo);
+}
+
+.btn-icon.active {
+    color: var(--accent-indigo);
+    background: rgba(99, 102, 241, 0.1);
+    border-color: var(--accent-indigo);
 }