Build second brain graph 2.0 view

static/style.css

@@ -10,10 +10,10 @@ body {
 }
 
 .app {
-    max-width: 480px;
+    max-width: 1180px;
     margin: 0 auto;
     min-height: 100vh;
-    background: #141419;
+    background: radial-gradient(circle at 50% 12%, #162238 0%, #11131d 42%, #0b0d13 100%);
     width: 100%;
 }
 
@@ -165,11 +165,14 @@ body {
 /* Graph canvas */
 #graphCanvas{
     display:block;
-    margin: 8px auto 0;
-    background:#02040a;
-    border:1px solid #172033;
+    margin: 10px auto 0;
+    background:#01030a;
+    border:0;
     border-radius: 50%;
-    box-shadow: 0 0 28px rgba(34,211,238,0.08), inset 0 0 42px rgba(124,58,237,0.08);
+    box-shadow:
+        0 0 48px rgba(34,211,238,0.14),
+        0 0 120px rgba(236,72,153,0.08),
+        inset 0 0 56px rgba(124,58,237,0.10);
     touch-action: none;
 }
 
@@ -181,8 +184,8 @@ body {
     flex-wrap: wrap;
 }
 .graph-controls .btn{
-    background:#1e1e28;
-    border:1px solid #2a2a3a;
+    background:rgba(12,18,31,0.88);
+    border:1px solid rgba(74,94,130,0.55);
     border-radius: 10px;
     padding: 8px 10px;
     color:#cfd3ff;
@@ -194,19 +197,19 @@ body {
     box-shadow:0 0 0 1px rgba(108,138,245,0.18) inset;
 }
 .graph-mode{
-    color:#8ef6e4;
+    color:#a7f3d0;
     font-size:0.78rem;
     font-weight:700;
     padding: 6px 8px;
-    border:1px solid #173c42;
-    background:#07151b;
+    border:1px solid rgba(52,211,153,0.35);
+    background:rgba(4,18,20,0.82);
     border-radius: 8px;
 }
 .graph-legend{
     margin: 8px 12px 0;
     padding: 10px 12px;
-    background:#1a1a24;
-    border:1px solid #252533;
+    background:rgba(11,15,25,0.72);
+    border:1px solid rgba(65,78,112,0.4);
     border-radius: 14px;
     color:#b9b9c9;
     font-size:0.8rem;
@@ -222,12 +225,45 @@ body {
 .graph-live{
     margin: 8px 12px 0;
     padding: 10px 12px;
-    background:#101820;
-    border:1px solid #22303d;
+    background:rgba(5,12,20,0.78);
+    border:1px solid rgba(56,189,248,0.22);
     border-radius: 10px;
     color:#bfe8df;
     font-size:0.78rem;
 }
+.graph-insights{
+    display:grid;
+    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+    gap: 8px;
+    margin: 8px 12px 0;
+}
+.graph-chip{
+    min-height: 44px;
+    padding: 8px 10px;
+    border: 1px solid rgba(80,96,130,0.42);
+    border-radius: 8px;
+    background: rgba(10,15,26,0.72);
+    color: #dbeafe;
+    overflow: hidden;
+}
+.graph-chip b{
+    display:block;
+    font-size: 0.78rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.graph-chip span{
+    display:block;
+    color:#8aa0c7;
+    font-size:0.72rem;
+    margin-top:2px;
+}
+
+@media (max-width: 560px) {
+    .app { max-width: 100%; }
+    .graph-controls .btn { padding: 8px 9px; }
+}
 .graph-live-title{
     color:#e8fffb;
     font-weight:700;