diff --git a/src/App.css b/src/App.css
index a90d6d0..76fad7d 100644
--- a/src/App.css
+++ b/src/App.css
@@ -274,11 +274,11 @@ a{color:inherit; text-decoration:none}
 .panel h2{margin:0 0 8px 0; font-size:16px}
 .panel .desc{color:var(--muted); font-size:13px; margin-bottom:10px}
 
-.flex-2{display:grid; grid-template-columns: 1.2fr 1fr; gap:16px}
+.flex-2{display:grid; grid-template-columns: 1fr 1fr; gap:16px}
 .flex-3{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px}
 .full{display:block; width:100%; box-sizing:border-box}
 
-.kpis{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:14px}
+.kpis{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:14px; margin-bottom: 16px;}
 .kpi{
   background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%);
   border:1px solid rgba(102, 126, 234, 0.1);
diff --git a/src/darkTheme.css b/src/darkTheme.css
new file mode 100644
index 0000000..bf91ddd
--- /dev/null
+++ b/src/darkTheme.css
@@ -0,0 +1,193 @@
+/* 深色科技风主题覆盖样式 - 参考 x.ai */
+
+/* 容器层级 */
+.container {
+  position: relative;
+  z-index: 1;
+}
+
+/* 侧边栏深色样式 */
+.sidebar {
+  border-right: 1px solid var(--border);
+  background: rgba(20, 20, 30, 0.7);
+  backdrop-filter: blur(20px);
+}
+
+.sidebar::before {
+  background: radial-gradient(
+    circle at 50% 0%,
+    rgba(124, 92, 255, 0.15) 0%,
+    transparent 70%
+  );
+}
+
+.brand .logo {
+  background: var(--primary-gradient);
+  box-shadow: var(--glow);
+}
+
+.brand h1 {
+  background: var(--accent-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  filter: drop-shadow(0 0 20px rgba(124, 92, 255, 0.5));
+}
+
+/* Header 深色样式 */
+.header {
+  border-bottom: 1px solid var(--border);
+  background: rgba(20, 20, 30, 0.8);
+  backdrop-filter: blur(20px);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+
+.search {
+  background: var(--soft);
+  border: 1px solid var(--border);
+}
+
+.search:focus-within {
+  border-color: var(--accent);
+  box-shadow: 0 0 20px var(--accent-glow);
+}
+
+/* 按钮深色样式 */
+.btn {
+  border: 1px solid var(--border);
+  background: var(--soft);
+  color: var(--text);
+}
+
+.btn:hover {
+  border-color: var(--accent);
+  box-shadow: 0 0 15px var(--accent-glow);
+}
+
+.btn.primary {
+  background: var(--primary-gradient);
+  border-color: transparent;
+  box-shadow: var(--glow);
+}
+
+.btn.primary:hover {
+  box-shadow: 0 0 30px var(--accent-glow);
+}
+
+/* 子导航深色样式 */
+.subnav {
+  background: rgba(20, 20, 30, 0.6);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.segment {
+  background: var(--soft);
+  border: 1px solid var(--border);
+}
+
+.segment button.active {
+  background: var(--panel);
+  color: var(--text);
+  box-shadow: 0 0 10px rgba(124, 92, 255, 0.2);
+}
+
+/* Panel 深色玻璃效果 */
+.panel {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  backdrop-filter: blur(20px);
+  box-shadow: var(--shadow);
+}
+
+.panel h2 {
+  color: var(--text);
+}
+
+.panel .desc {
+  color: var(--text-secondary);
+}
+
+/* KPI 卡片深色样式 */
+.kpi {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  backdrop-filter: blur(20px);
+}
+
+.kpi:hover {
+  border-color: var(--accent);
+  box-shadow: var(--glow);
+}
+
+.kpi h3 {
+  color: var(--text-secondary);
+}
+
+.kpi .num {
+  background: var(--accent-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  filter: drop-shadow(0 0 10px rgba(124, 92, 255, 0.5));
+}
+
+/* 表格深色样式 */
+.table {
+  color: var(--text);
+}
+
+.table th {
+  color: var(--text-secondary);
+  border-bottom: 1px solid var(--border);
+}
+
+.table td {
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.table tbody tr:hover {
+  background: rgba(124, 92, 255, 0.05);
+}
+
+/* Badge 深色样式 */
+.badge {
+  background: var(--soft);
+  border: 1px solid var(--border);
+  color: var(--text);
+}
+
+.badge.good {
+  background: rgba(0, 212, 170, 0.15);
+  border-color: var(--good);
+  color: var(--good);
+  box-shadow: 0 0 10px rgba(0, 212, 170, 0.2);
+}
+
+.badge.warn {
+  background: rgba(255, 179, 71, 0.15);
+  border-color: var(--warn);
+  color: var(--warn);
+  box-shadow: 0 0 10px rgba(255, 179, 71, 0.2);
+}
+
+.badge.bad {
+  background: rgba(255, 107, 157, 0.15);
+  border-color: var(--bad);
+  color: var(--bad);
+  box-shadow: 0 0 10px rgba(255, 107, 157, 0.2);
+}
+
+/* Chart 深色样式 */
+.chart {
+  border: 1px dashed var(--border);
+  color: var(--muted);
+  background: rgba(124, 92, 255, 0.02);
+}
+
+/* Footer 深色样式 */
+.footer {
+  border-top: 1px solid var(--border-subtle);
+  color: var(--muted);
+  background: rgba(10, 10, 15, 0.5);
+}
\ No newline at end of file