diff --git a/static/css/main.css b/static/css/main.css
index af09f27..1d68ffd 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1,6 +1,6 @@
-/* DNSRecon - Enhanced Tactical/Cybersecurity Theme */
+/* DNSRecon - Optimized Compact Theme */
 
-/* Reset and Base Styles */
+/* Reset and Base */
 * {
     margin: 0;
     padding: 0;
@@ -8,28 +8,27 @@
 }
 
 body {
-    font-family: 'Roboto Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
+    font-family: 'Roboto Mono', monospace;
     background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
     color: #e0e0e0;
-    line-height: 1.6;
-    letter-spacing: 0.5px;
+    line-height: 1.4;
+    letter-spacing: 0.3px;
+    font-size: 0.85rem;
     min-height: 100vh;
     overflow-x: hidden;
 }
 
-/* Container and Layout */
 .container {
     min-height: 100vh;
     display: flex;
     flex-direction: column;
 }
 
-/* === ENHANCED HEADER === */
+/* Header */
 .header {
     background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
-    border-bottom: 2px solid #333;
-    padding: 1.5rem 2rem;
-    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
+    border-bottom: 1px solid #333;
+    padding: 0.75rem 1rem;
     position: sticky;
     top: 0;
     z-index: 100;
@@ -39,64 +38,44 @@ body {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    max-width: 1400px;
+    max-width: 2400px;
     margin: 0 auto;
 }
 
 .logo {
     display: flex;
     align-items: center;
-    font-family: 'Special Elite', 'Courier New', monospace;
-    font-size: 1.6rem;
+    font-family: 'Special Elite', monospace;
+    font-size: 1.3rem;
     font-weight: 700;
-    gap: 0.5rem;
+    gap: 0.3rem;
 }
 
 .logo-icon {
     color: #00ff41;
-    margin-right: 0.5rem;
-    text-shadow: 0 0 15px rgba(0, 255, 65, 0.6);
-    animation: logoGlow 3s ease-in-out infinite alternate;
-}
-
-@keyframes logoGlow {
-    from { text-shadow: 0 0 15px rgba(0, 255, 65, 0.6); }
-    to { text-shadow: 0 0 25px rgba(0, 255, 65, 0.8); }
+    text-shadow: 0 0 10px rgba(0, 255, 65, 0.5);
 }
 
 .logo-text {
     color: #c7c7c7;
-    text-shadow: 0 0 5px rgba(199, 199, 199, 0.3);
 }
 
 .status-indicator {
     display: flex;
     align-items: center;
-    gap: 0.75rem;
-    padding: 0.5rem 1rem;
+    gap: 0.5rem;
+    padding: 0.3rem 0.75rem;
     background: rgba(42, 42, 42, 0.6);
-    border-radius: 25px;
+    border-radius: 15px;
     border: 1px solid #333;
 }
 
-.status-indicator.scanning {
-    animation: pulse 1.5s infinite;
-}
-
-.status-indicator.completed {
-    background-color: #00ff41;
-}
-
-.status-indicator.error {
-    background-color: #ff6b6b;
-}
-
 .status-dot {
-    width: 10px;
-    height: 10px;
+    width: 8px;
+    height: 8px;
     border-radius: 50%;
     background-color: #00ff41;
-    box-shadow: 0 0 10px rgba(0, 255, 65, 0.7);
+    box-shadow: 0 0 8px rgba(0, 255, 65, 0.6);
     animation: statusPulse 2s infinite;
 }
 
@@ -105,140 +84,147 @@ body {
     50% { opacity: 0.7; transform: scale(1.1); }
 }
 
-@keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.5; }
+.status-indicator.scanning {
+    animation: pulse 1.5s infinite;
 }
 
 .status-text {
-    font-size: 0.9rem;
+    font-size: 0.8rem;
     color: #00ff41;
 }
 
-/* Main Content */
+/* Main Layout - Graph-Centric */
 .main-content {
     flex: 1;
-    padding: 1.25rem; /* Reduced from 2rem */
-    max-width: 1400px;
+    padding: 0.75rem;
+    max-width: 2400px;
     margin: 0 auto;
     width: 100%;
     display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: auto auto 1fr auto;
-    gap: 1rem; /* Reduced from 1.5rem */
+    grid-template-columns: 300px 1fr;
+    grid-template-rows: auto 1fr auto;
+    gap: 0.75rem;
     grid-template-areas:
         "control status"
         "visualization visualization"
-        "visualization visualization"
         "providers providers";
 }
 
-/* === ENHANCED PANELS === */
+/* Unified Panel Styles */
 section {
     background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%);
     border: 1px solid #444;
-    border-radius: 8px;
-    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
+    border-radius: 6px;
     overflow: hidden;
-    transition: all 0.3s ease;
-}
-
-section:hover {
-    border-color: #555;
-    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
+    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
 }
 
 .panel-header {
     background: linear-gradient(90deg, #333 0%, #2a2a2a 100%);
-    padding: 0.75rem 1rem; /* Reduced from 1.25rem 1.5rem */
-    border-bottom: 2px solid #444;
-    position: relative;
-    overflow: hidden;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-/* Remove the generic top line */
-.panel-header::before {
-    display: none;
+    padding: 0.5rem 0.75rem;
+    border-bottom: 1px solid #444;
 }
 
 .panel-header h2 {
-    font-size: 1.2rem;
+    font-size: 1rem;
     color: #00ff41;
-    text-shadow: 0 0 10px rgba(0, 255, 65, 0.4);
     font-weight: 600;
     margin: 0;
-    letter-spacing: 1px;
 }
 
-/* Control Panel */
+/* Controls */
 .control-panel {
     grid-area: control;
 }
 
 .form-container {
-    padding: 1rem;
+    padding: 0.75rem;
 }
 
 .input-group {
-    margin-bottom: 1.25rem;
+    margin-bottom: 0.75rem;
 }
 
 .input-group label {
     display: block;
-    margin-bottom: 0.75rem;
+    margin-bottom: 0.4rem;
     color: #e0e0e0;
-    font-size: 0.95rem;
+    font-size: 0.8rem;
     font-weight: 500;
-    letter-spacing: 0.5px;
 }
 
 input[type="text"], select {
     width: 100%;
-    padding: 1rem;
-    background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
-    border: 2px solid #444;
-    border-radius: 6px;
+    padding: 0.6rem;
+    background: #1a1a1a;
+    border: 1px solid #444;
+    border-radius: 4px;
     color: #e0e0e0;
     font-family: 'Roboto Mono', monospace;
-    font-size: 0.95rem;
-    transition: all 0.3s ease;
-    position: relative;
+    font-size: 0.8rem;
+    transition: border-color 0.3s ease;
 }
 
 input[type="text"]:focus, select:focus {
     outline: none;
     border-color: #00ff41;
-    box-shadow: 0 0 15px rgba(0, 255, 65, 0.3);
-    background: linear-gradient(135deg, #1f1f1f 0%, #141414 100%);
+    box-shadow: 0 0 8px rgba(0, 255, 65, 0.3);
 }
 
 .button-group {
     display: flex;
     flex-direction: column;
-    gap: 0.75rem;
+    gap: 0.5rem;
 }
 
-/* === ENHANCED BUTTONS === */
+/* Unified Button Styles */
 .btn {
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 0.75rem;
-    padding: 1rem 1.5rem;
+    gap: 0.5rem;
+    padding: 0.6rem 1rem;
     font-family: 'Roboto Mono', monospace;
-    font-size: 0.95rem;
+    font-size: 0.8rem;
     font-weight: 500;
     border: none;
-    border-radius: 6px;
+    border-radius: 4px;
     cursor: pointer;
     transition: all 0.3s ease;
     text-transform: uppercase;
-    letter-spacing: 0.5px;
-    position: relative;
-    overflow: hidden;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, #2c5c34 0%, #1e4025 100%);
+    color: #e0e0e0;
+    border: 1px solid #3a7a48;
+}
+
+.btn-primary:hover:not(:disabled) {
+    background: linear-gradient(135deg, #3d7d4e 0%, #2a5436 100%);
+    transform: translateY(-1px);
+}
+
+.btn-secondary {
+    background: linear-gradient(135deg, #4a4a4a 0%, #333 100%);
+    color: #e0e0e0;
+    border: 1px solid #555;
+}
+
+.btn-secondary:hover:not(:disabled) {
+    background: linear-gradient(135deg, #5a5a5a 0%, #444 100%);
+    transform: translateY(-1px);
+}
+
+.btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none !important;
+}
+
+.btn.loading {
+    opacity: 0.7;
+    pointer-events: none;
 }
 
 .btn::before {
@@ -256,61 +242,9 @@ input[type="text"]:focus, select:focus {
     left: 100%;
 }
 
-.btn-primary {
-    background: linear-gradient(135deg, #2c5c34 0%, #1e4025 100%);
-    color: #e0e0e0;
-    border: 1px solid #3a7a48;
-}
-
-.btn-primary:hover:not(:disabled) {
-    background: linear-gradient(135deg, #3d7d4e 0%, #2a5436 100%);
-    box-shadow: 0 6px 20px rgba(0, 255, 65, 0.3);
-    transform: translateY(-2px);
-}
-
-.btn-secondary {
-    background: linear-gradient(135deg, #4a4a4a 0%, #333 100%);
-    color: #e0e0e0;
-    border: 1px solid #555;
-}
-
-.btn-secondary:hover:not(:disabled) {
-    background: linear-gradient(135deg, #5a5a5a 0%, #444 100%);
-    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.1);
-    transform: translateY(-2px);
-}
-
-.btn-secondary:active {
-    background-color: #6a4f2a;
-}
-
-.btn:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-    transform: none !important;
-    box-shadow: none !important;
-}
-
 .btn-icon {
     color: #00ff41;
     font-weight: 700;
-    text-shadow: 0 0 5px rgba(0, 255, 65, 0.5);
-}
-
-.btn-icon-small {
-    background: transparent;
-    border: 1px solid #555;
-    color: #c7c7c7;
-    padding: 0.25rem 0.5rem;
-    font-family: 'Roboto Mono', monospace;
-    font-size: 0.8rem;
-    cursor: pointer;
-    transition: all 0.3s ease;
-}
-
-.btn-icon-small:hover {
-    border-color: #00ff41;
-    color: #00ff41;
 }
 
 /* Status Panel */
@@ -319,76 +253,59 @@ input[type="text"]:focus, select:focus {
 }
 
 .status-content {
-    padding: 1rem;
+    padding: 0.75rem;
 }
 
 .status-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 1rem;
-    padding: 0.75rem;
+    margin-bottom: 0.6rem;
+    padding: 0.4rem;
     background: rgba(255, 255, 255, 0.02);
-    border-radius: 4px;
-    border-left: 3px solid #333;
-    transition: all 0.3s ease;
-}
-
-.status-row:hover {
-    background: rgba(255, 255, 255, 0.05);
-    border-left-color: #00ff41;
+    border-radius: 3px;
+    border-left: 2px solid #333;
 }
 
 .status-label {
     color: #999;
-    font-size: 0.9rem;
+    font-size: 0.75rem;
     font-weight: 500;
 }
 
 .status-value {
     color: #00ff41;
     font-weight: 600;
-    text-shadow: 0 0 5px rgba(0, 255, 65, 0.3);
-    font-family: 'Roboto Mono', monospace;
+    font-size: 0.8rem;
 }
 
 .progress-container {
-    padding: 1rem;
+    padding: 0.75rem;
     background: rgba(0, 0, 0, 0.2);
 }
 
 .progress-info {
     display: flex;
     justify-content: space-between;
-    align-items: center;
-    font-size: 0.9rem;
+    font-size: 0.75rem;
     color: #999;
-    margin-bottom: 0.75rem;
-}
-
-#progress-compact {
-    color: #00ff41;
-    font-weight: 600;
-    font-family: 'Roboto Mono', monospace;
+    margin-bottom: 0.5rem;
 }
 
 .progress-bar {
-    height: 12px;
-    background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
+    height: 8px;
+    background: #1a1a1a;
     border: 1px solid #444;
-    border-radius: 6px;
+    border-radius: 4px;
     overflow: hidden;
-    position: relative;
-    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
 }
 
 .progress-fill {
     height: 100%;
-    background: linear-gradient(90deg, #00ff41 0%, #00aa2e 50%, #00ff41 100%);
+    background: linear-gradient(90deg, #00ff41 0%, #00aa2e 100%);
     width: 0%;
     transition: width 0.5s ease;
     position: relative;
-    border-radius: 4px;
 }
 
 .progress-fill::after {
@@ -405,170 +322,37 @@ input[type="text"]:focus, select:focus {
     animation: progressShimmer 2s infinite;
 }
 
+.progress-bar.scanning {
+    animation: progressGlow 2s ease-in-out infinite alternate;
+}
+
 @keyframes progressShimmer {
     0% { transform: translateX(-100%); }
     100% { transform: translateX(100%); }
 }
 
-.progress-bar.scanning {
-    animation: progressGlow 2s ease-in-out infinite alternate;
-}
-
 @keyframes progressGlow {
     from { box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), 0 0 5px rgba(0, 255, 65, 0.3); }
     to { box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), 0 0 15px rgba(0, 255, 65, 0.6); }
 }
 
-/* Visualization Panel */
+.placeholder-subtext {
+    font-size: 0.75rem;
+    color: #666;
+    line-height: 1.3;
+}
+
+/* Graph Container - Main Focus */
 .visualization-panel {
     grid-area: visualization;
-    min-height: 500px;
+    min-height: 600px;
 }
 
 .graph-container {
-    height: 800px;
+    height: 600px;
     position: relative;
     background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
-    border-top: 2px solid #444;
-    transition: height 0.3s ease;
-    overflow: hidden;
-}
-
-.graph-controls {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    z-index: 10;
-    display: flex;
-    gap: 0.5rem;
-}
-
-.graph-control-btn {
-    background: rgba(42, 42, 42, 0.9);
-    border: 1px solid #555;
-    color: #c7c7c7;
-    padding: 0.5rem;
-    font-family: 'Roboto Mono', monospace;
-    font-size: 0.8rem;
-    cursor: pointer;
-    transition: all 0.3s ease;
-}
-
-.graph-control-btn:hover {
-    border-color: #00ff41;
-    color: #00ff41;
-    background: rgba(42, 42, 42, 1);
-}
-
-.graph-filter-panel {
-    position: absolute;
-    bottom: 10px;
-    left: 10px;
-    z-index: 10;
-    background: rgba(42, 42, 42, 0.9);
-    border: 1px solid #555;
-    color: #c7c7c7;
-    padding: 0.75rem;
-    font-family: 'Roboto Mono', monospace;
-    font-size: 0.8rem;
-    /*max-height: 40%;
-    overflow-y: auto;*/
-    display: flex;
-    gap: 1.5rem;
-}
-
-.filter-column {
-    display: flex;
-    flex-direction: column;
-}
-
-.filter-column h4 {
-    color: #00ff41;
-    margin-bottom: 0.5rem;
-    font-size: 0.9rem;
-    border-bottom: 1px solid #444;
-    padding-bottom: 0.25rem;
-}
-
-.filter-column .checkbox-group {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-}
-
-.filter-column label {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    cursor: pointer;
-    transition: color 0.2s;
-}
-
-.filter-column label:hover {
-    color: #00ff41;
-}
-
-.filter-column input[type="checkbox"] {
-    appearance: none;
-    width: 12px;
-    height: 12px;
-    border: 1px solid #555;
-    background-color: #1a1a1a;
-    cursor: pointer;
-    position: relative;
-}
-
-.filter-column input[type="checkbox"]:checked {
-    background-color: #00ff41;
-    border-color: #00ff41;
-}
-
-.filter-column input[type="checkbox"]:checked::after {
-    content: '✓';
-    position: absolute;
-    top: -3px;
-    left: 1px;
-    color: #1a1a1a;
-    font-size: 12px;
-}
-
-.graph-context-menu {
-    position: absolute;
-    z-index: 1000;
-    background-color: #2a2a2a;
-    border: 1px solid #444;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
-    display: none;
-    font-family: 'Roboto Mono', monospace;
-    font-size: 0.9rem;
-    color: #c7c7c7;
-}
-
-.graph-context-menu ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-}
-
-.graph-context-menu ul li {
-    padding: 0.75rem 1rem;
-    cursor: pointer;
-    transition: background-color 0.2s ease;
-}
-
-.graph-context-menu ul li:hover {
-    background-color: #3a3a3a;
-    color: #00ff41;
-}
-
-.graph-context-menu ul li[disabled] {
-    color: #666;
-    cursor: not-allowed;
-}
-
-.graph-context-menu ul li[disabled]:hover {
-    background-color: #2a2a2a;
-    color: #666;
+    border-top: 1px solid #444;
 }
 
 .graph-placeholder {
@@ -578,7 +362,6 @@ input[type="text"]:focus, select:focus {
     height: 100%;
     color: #666;
     text-align: center;
-    background: radial-gradient(circle at center, rgba(0, 255, 65, 0.05) 0%, transparent 70%);
 }
 
 .placeholder-content {
@@ -586,88 +369,142 @@ input[type="text"]:focus, select:focus {
 }
 
 .placeholder-icon {
-    font-size: 4rem;
-    margin-bottom: 1rem;
+    font-size: 3rem;
+    margin-bottom: 0.75rem;
     color: #333;
-    text-shadow: 0 0 20px rgba(0, 255, 65, 0.2);
 }
 
 .placeholder-text {
-    font-size: 1.1rem;
+    font-size: 1rem;
     margin-bottom: 0.5rem;
     color: #999;
 }
 
-.placeholder-subtext {
-    font-size: 0.9rem;
-    color: #666;
-}
-
-.legend {
-    background: linear-gradient(135deg, #222 0%, #1a1a1a 100%);
-    border-top: 2px solid #444;
-    padding: 0.75rem 1rem; /* Reduced from 1.25rem 1.75rem */
+/* Graph Controls */
+.graph-controls {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    z-index: 10;
     display: flex;
-    flex-wrap: wrap;
-    gap: 1rem; /* Reduced from 1.5rem */
-    align-items: center;
+    gap: 0.3rem;
 }
 
-.legend-section {
+.graph-control-btn, .btn-icon-small {
+    background: rgba(42, 42, 42, 0.9);
+    border: 1px solid #555;
+    color: #c7c7c7;
+    padding: 0.3rem 0.5rem;
+    font-family: 'Roboto Mono', monospace;
+    font-size: 0.7rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.graph-control-btn:hover, .btn-icon-small:hover {
+    border-color: #00ff41;
+    color: #00ff41;
+}
+
+.graph-filter-panel {
+    position: absolute;
+    bottom: 8px;
+    left: 8px;
+    z-index: 10;
+    background: rgba(42, 42, 42, 0.9);
+    border: 1px solid #555;
+    padding: 0.5rem;
+    font-size: 0.7rem;
+    display: flex;
+    gap: 1rem;
+}
+
+.filter-column h4 {
+    color: #00ff41;
+    margin-bottom: 0.3rem;
+    font-size: 0.75rem;
+    border-bottom: 1px solid #444;
+    padding-bottom: 0.2rem;
+}
+
+.filter-column .checkbox-group {
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
+    gap: 0.2rem;
 }
 
-.legend-title {
+.filter-column label {
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+    cursor: pointer;
     font-size: 0.7rem;
-    color: #00ff41;
-    text-transform: uppercase;
-    font-weight: 500;
-    margin-bottom: 0.25rem;
+}
+
+.filter-column input[type="checkbox"] {
+    appearance: none;
+    width: 10px;
+    height: 10px;
+    border: 1px solid #555;
+    background: #1a1a1a;
+    cursor: pointer;
+}
+
+.filter-column input[type="checkbox"]:checked {
+    background: #00ff41;
+    border-color: #00ff41;
+}
+
+.filter-column input[type="checkbox"]:checked::after {
+    content: '✓';
+    position: absolute;
+    color: #1a1a1a;
+    font-size: 8px;
+    line-height: 10px;
+    text-align: center;
+    width: 10px;
+}
+
+/* Legend */
+.legend {
+    background: #222;
+    border-top: 1px solid #444;
+    padding: 0.5rem 0.75rem;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    align-items: center;
 }
 
 .legend-item {
     display: flex;
     align-items: center;
-    gap: 0.75rem;
-    font-size: 0.85rem;
+    gap: 0.4rem;
+    font-size: 0.7rem;
     color: #ccc;
-    padding: 0.5rem;
-    border-radius: 4px;
+    padding: 0.3rem;
+    border-radius: 3px;
     background: rgba(255, 255, 255, 0.02);
-    transition: all 0.3s ease;
-}
-
-.legend-item:hover {
-    background: rgba(255, 255, 255, 0.05);
 }
 
 .legend-color {
-    width: 14px;
-    height: 14px;
+    width: 10px;
+    height: 10px;
     border-radius: 50%;
-    border: 2px solid #444;
-    box-shadow: 0 0 5px rgba(0,0,0,0.5);
+    border: 1px solid #444;
 }
 
 .legend-edge {
-    width: 20px;
+    width: 16px;
     height: 2px;
 }
 
 .legend-edge.high-confidence {
-    background-color: #00ff41;
-    box-shadow: 0 0 3px rgba(0, 255, 65, 0.5);
+    background: #00ff41;
 }
 
 .legend-edge.medium-confidence {
-    background-color: #ff9900;
-    box-shadow: 0 0 3px rgba(255, 153, 0, 0.5);
-}
-
-.legend-edge.low-confidence {
-    background-color: #666666;
+    background: #ff9900;
 }
 
 /* Provider Panel */
@@ -676,126 +513,90 @@ input[type="text"]:focus, select:focus {
 }
 
 .provider-list {
-    padding: 1rem; /* Reduced from 1.75rem */
+    padding: 0.75rem;
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: 1rem; /* Reduced from 1.25rem */
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 0.75rem;
 }
 
 .provider-item {
     background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%);
     border: 1px solid #333;
-    border-radius: 8px;
-    padding: 1rem; /* Reduced from 1.25rem */
+    border-radius: 6px;
+    padding: 0.75rem;
     transition: all 0.3s ease;
-    position: relative;
-    overflow: hidden;
-}
-
-/* Remove provider item top line */
-.provider-item::before {
-    display: none;
 }
 
 .provider-item:hover {
     border-color: #444;
-    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
-    transform: translateY(-2px);
-}
-
-.provider-item:hover::before {
-    background: linear-gradient(90deg, #00ff41 0%, #00aa2e 100%);
-}
-
-.provider-name {
-    font-weight: 600;
-    color: #e0e0e0;
-    font-size: 1.1rem;
-}
-
-.provider-status {
-    font-size: 0.8rem;
-    padding: 0.4rem 0.8rem;
-    border-radius: 4px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-}
-
-.provider-status.enabled {
-    background: linear-gradient(135deg, #2c5c34 0%, #1e4025 100%);
-    color: #e0e0e0;
-    border: 1px solid #3a7a48;
-}
-
-.provider-status.disabled {
-    background: linear-gradient(135deg, #5c2c2c 0%, #402020 100%);
-    color: #e0e0e0;
-    border: 1px solid #7a3a3a;
-}
-
-.provider-status.api-key-required {
-    background: linear-gradient(135deg, #5c4c2c 0%, #403620 100%);
-    color: #e0e0e0;
-    border: 1px solid #7a6a3a;
-}
-
-.provider-stats, .provider-task-stats {
-    font-size: 0.8rem;
-    color: #999;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 0.75rem;
-    margin-top: 0.5rem;
-}
-
-.provider-task-stats {
-    border-top: 1px solid #333;
-    padding-top: 0.5rem;
-    margin-top: 0.5rem;
-}
-
-.provider-stat {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-}
-
-.provider-stat-label {
-    color: #999;
-    font-size: 0.8rem;
-    font-weight: 500;
-}
-
-.provider-stat-value {
-    color: #00ff41;
-    font-weight: 600;
-    font-family: 'Roboto Mono', monospace;
-    font-size: 1rem;
+    transform: translateY(-1px);
 }
 
 .provider-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 1rem;
+    margin-bottom: 0.5rem;
 }
 
-.node-info-popup {
-    position: fixed;
-    background: rgba(42, 42, 42, 0.95);
-    border: 1px solid #555;
-    padding: 1rem;
-    border-radius: 4px;
-    color: #c7c7c7;
-    font-family: 'Roboto Mono', monospace;
-    font-size: 0.8rem;
-    max-width: 300px;
-    z-index: 1001;
-    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
+.provider-name {
+    font-weight: 600;
+    color: #e0e0e0;
+    font-size: 0.9rem;
 }
 
-/* === ENHANCED MODAL STYLING === */
+.provider-status {
+    font-size: 0.65rem;
+    padding: 0.2rem 0.4rem;
+    border-radius: 3px;
+    font-weight: 600;
+    text-transform: uppercase;
+}
+
+.provider-status.enabled {
+    background: #2c5c34;
+    color: #e0e0e0;
+    border: 1px solid #3a7a48;
+}
+
+.provider-status.disabled {
+    background: #5c2c2c;
+    color: #e0e0e0;
+    border: 1px solid #7a3a3a;
+}
+
+.provider-status.api-key-required {
+    background: #5c4c2c;
+    color: #e0e0e0;
+    border: 1px solid #7a6a3a;
+}
+
+.provider-stats {
+    font-size: 0.7rem;
+    color: #999;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.5rem;
+}
+
+.provider-stat {
+    display: flex;
+    flex-direction: column;
+    gap: 0.1rem;
+}
+
+.provider-stat-label {
+    color: #999;
+    font-size: 0.65rem;
+}
+
+.provider-stat-value {
+    color: #00ff41;
+    font-weight: 600;
+    font-size: 0.75rem;
+}
+
+/* Modal Styles - Simplified */
 .modal {
     display: none;
     position: fixed;
@@ -804,104 +605,45 @@ input[type="text"]:focus, select:focus {
     top: 0;
     width: 100%;
     height: 100%;
-    overflow: auto;
-    backdrop-filter: blur(8px);
-    background-color: rgba(0,0,0,0.7);
+    background: rgba(0,0,0,0.7);
 }
 
 .modal-content {
     background: linear-gradient(135deg, #1e1e1e 0%, #252525 100%);
-    margin: 10% auto;
+    margin: 5% auto;
     padding: 0;
     border: 1px solid #444;
-    border-radius: 8px;
-    width: 60%;
-    max-width: 800px;
-    max-height: 85vh;
+    border-radius: 6px;
+    width: 70%;
+    max-width: 900px;
+    max-height: 100vh;
     overflow: hidden;
-    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
-    animation: modalSlideIn 0.3s ease-out;
-}
-
-@keyframes modalSlideIn {
-    from {
-        opacity: 0;
-        transform: translateY(-20px) scale(0.95);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0) scale(1);
-    }
-}
-
-.modal-opening {
-    animation: modalFadeIn 0.3s ease-out;
-}
-
-.modal-closing {
-    animation: modalFadeOut 0.2s ease-in;
-}
-
-@keyframes modalFadeIn {
-    from {
-        opacity: 0;
-        transform: scale(0.9);
-    }
-    to {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-
-@keyframes modalFadeOut {
-    from {
-        opacity: 1;
-        transform: scale(1);
-    }
-    to {
-        opacity: 0;
-        transform: scale(0.95);
-    }
 }
 
 .modal-header {
-    background: linear-gradient(90deg, #2a2a2a 0%, #1e1e1e 100%);
-    border-bottom: 2px solid #444;
-    padding: 1.5rem 2rem;
-    position: sticky;
-    top: 0;
-    z-index: 10;
+    background: #2a2a2a;
+    border-bottom: 1px solid #444;
+    padding: 0.75rem 1rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
 
 .modal-header h3 {
-    font-size: 1.3rem;
+    font-size: 1rem;
     margin: 0;
     color: #00ff41;
-    text-shadow: 0 0 10px rgba(0, 255, 65, 0.3);
     display: flex;
     align-items: center;
 }
 
-.modal-title-icon {
-    margin-right: 0.5rem;
-    font-size: 1.2rem;
-}
-
-.modal-title-text {
-    font-family: 'Special Elite', monospace;
-}
-
 .modal-close {
     background: none;
     border: none;
     color: #c7c7c7;
-    font-size: 24px;
+    font-size: 18px;
     cursor: pointer;
-    padding: 0 10px;
-    transition: color 0.3s ease;
+    padding: 0 8px;
 }
 
 .modal-close:hover {
@@ -909,33 +651,154 @@ input[type="text"]:focus, select:focus {
 }
 
 .modal-body {
-    padding: 0;
-    max-height: calc(85vh - 120px);
+    max-height: calc(90vh - 80px);
     overflow-y: auto;
-    scroll-behavior: smooth;
 }
 
+.modal-details {
+    padding: 0.75rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+/* Modal Content Styles */
 .modal-section {
+    border: 1px solid #333;
+    border-radius: 4px;
+    background: #2a2a2a;
+}
+
+.section-card {
+    background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
+    border: 1px solid #333;
+    border-radius: 6px;
+    overflow: hidden;
+    transition: all 0.3s ease;
+    margin-bottom: 0.5rem;
+}
+
+.section-card:hover {
+    border-color: #444;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+}
+
+.section-card.collapsed .metadata-content {
+    display: none;
+}
+
+.section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem 0.75rem;
+    background: rgba(0, 255, 65, 0.05);
+    border-bottom: 1px solid #333;
+    cursor: pointer;
+}
+
+.section-header h4 {
+    margin: 0;
+    font-size: 0.85rem;
+    color: #00ff41;
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    pointer-events: none;
+}
+
+.section-icon {
+    font-size: 0.9rem;
+}
+
+.toggle-section-btn {
+    background: none;
+    border: none;
+    color: #999;
+    cursor: pointer;
+    padding: 0.2rem;
+    transition: color 0.3s ease;
+    font-size: 0.7rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.toggle-section-btn:hover {
+    color: #00ff41;
+}
+
+.metadata-section {
     border: 1px solid #333;
     border-radius: 6px;
     overflow: hidden;
     background: #2a2a2a;
 }
 
-.modal-section details {
-    border: none;
+.metadata-content {
+    padding: 0.75rem;
+    background: #1e1e1e;
+    font-size: 0.75rem;
+}
+
+/* Formatted Object HTML Styles */
+.metadata-content ul {
+    list-style: none;
+    padding-left: 1rem;
+    margin: 0;
+}
+
+.metadata-content li {
+    margin-bottom: 0.4rem;
+    padding: 0.2rem 0;
+    border-bottom: 1px solid rgba(255,255,255,0.05);
+}
+
+.metadata-content li:last-child {
+    border-bottom: none;
+    margin-bottom: 0;
+}
+
+.metadata-content details {
+    margin: 0.3rem 0;
+}
+
+.metadata-content summary {
+    cursor: pointer;
+    padding: 0.3rem;
+    background: rgba(255,255,255,0.02);
+    border-radius: 3px;
+    margin-bottom: 0.3rem;
+    font-weight: 500;
+}
+
+.metadata-content summary:hover {
+    background: rgba(255,255,255,0.05);
+}
+
+.metadata-content strong {
+    color: #00ff41;
+    font-weight: 500;
+    margin-right: 0.5rem;
+}
+
+.metadata-content .no-data {
+    color: #666;
+    font-style: italic;
+    text-align: center;
+    padding: 1rem;
 }
 
 .modal-section summary {
-    padding: 0.75rem 1rem;
+    padding: 0.5rem 0.75rem;
     background: rgba(0, 255, 65, 0.05);
-    border-bottom: 1px solid #333;
     cursor: pointer;
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-weight: 500;
     color: #00ff41;
+    font-size: 0.8rem;
     list-style: none;
 }
 
@@ -946,336 +809,108 @@ input[type="text"]:focus, select:focus {
 .modal-section summary::after {
     content: '▼';
     transition: transform 0.3s ease;
-    font-size: 0.8rem;
+    font-size: 0.7rem;
 }
 
 .modal-section[open] summary::after {
     transform: rotate(180deg);
 }
 
+.modal-section .count-badge {
+    background: #444;
+    color: #fff;
+    padding: 0.15rem 0.4rem;
+    border-radius: 2px;
+    font-size: 0.65rem;
+    font-weight: 600;
+    min-width: 20px;
+    text-align: center;
+}
+
 .modal-section-content {
-    padding: 0.75rem 1rem;
+    padding: 0.5rem 0.75rem;
     background: #1e1e1e;
 }
 
-/* Custom scrollbar for modal */
-.modal-body::-webkit-scrollbar {
-    width: 8px;
-}
-
-.modal-body::-webkit-scrollbar-track {
-    background: #1a1a1a;
-}
-
-.modal-body::-webkit-scrollbar-thumb {
-    background: #444;
-    border-radius: 4px;
-}
-
-.modal-body::-webkit-scrollbar-thumb:hover {
-    background: #555;
-}
-
-/* === ENHANCED NODE DETAILS LAYOUT === */
-.modal-details {
-    padding: 1rem; /* Reduced from 1.5rem */
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem; /* Reduced from 1.5rem */
-}
-
-/* Node Header */
+/* Node Details */
 .node-header {
     display: flex;
     align-items: center;
-    gap: 0.75rem; /* Reduced from 1rem */
-    padding: 0.75rem; /* Reduced from 1rem */
-    background: linear-gradient(135deg, #2a2a2a 0%, #333 100%);
-    border-radius: 8px;
-    border-left: 4px solid #00ff41;
+    gap: 0.5rem;
+    padding: 0.5rem;
+    background: #333;
+    border-radius: 4px;
 }
 
 .node-type-badge {
-    padding: 0.4rem 0.8rem;
-    border-radius: 4px;
-    font-size: 0.8rem;
+    padding: 0.2rem 0.5rem;
+    border-radius: 3px;
+    font-size: 0.65rem;
     font-weight: 600;
     text-transform: uppercase;
-    letter-spacing: 0.5px;
 }
 
 .node-type-domain { background: #00ff41; color: #000; }
 .node-type-ip { background: #ff9900; color: #000; }
-.node-type-asn { background: #00aaff; color: #000; }
+.node-type-isp { background: #00aaff; color: #000; }
 .node-type-large_entity { background: #ff6b6b; color: #fff; }
 .node-type-correlation_object { background: #9620c0; color: #fff; }
 
 .node-id-display {
-    font-family: 'Roboto Mono', monospace;
-    font-size: 1.1rem;
+    font-size: 0.85rem;
     color: #e0e0e0;
     word-break: break-all;
 }
 
-/* Quick Stats Bar */
 .quick-stats {
     display: flex;
-    gap: 0.75rem; /* Reduced from 1rem */
-    padding: 0.5rem; /* Reduced from 0.75rem */
+    gap: 0.5rem;
+    padding: 0.4rem;
     background: rgba(42, 42, 42, 0.5);
-    border-radius: 6px;
-    border: 1px solid #333;
+    border-radius: 4px;
 }
 
 .stat-item {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: 0.3rem;
     flex: 1;
     text-align: center;
 }
 
 .stat-icon {
-    font-size: 1.2rem;
+    font-size: 1rem;
     color: #00ff41;
 }
 
 .stat-value {
-    font-size: 1.1rem;
+    font-size: 0.9rem;
     font-weight: 600;
     color: #fff;
 }
 
 .stat-label {
-    font-size: 0.8rem;
+    font-size: 0.65rem;
     color: #999;
 }
 
-/* Section Cards */
-.section-card {
-    background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
-    border: 1px solid #333;
-    border-radius: 8px;
-    overflow: hidden;
-    transition: all 0.3s ease;
-    animation: slideInUp 0.3s ease-out;
-}
-
-@keyframes slideInUp {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-.section-card:hover {
-    border-color: #444;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-}
-
-.section-card.collapsed .section-header .toggle-icon {
-    transform: rotate(-90deg);
-}
-
-.section-card.collapsed,
-.section-card.collapsed .metadata-content {
-    display: none;
-}
-
-.section-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0.75rem 1rem; /* Reduced from 1rem 1.5rem */
-    background: rgba(0, 255, 65, 0.05);
-    border-bottom: 1px solid #333;
-    cursor: pointer; /* Make clickable for collapse */
-}
-
-.section-header h4 {
-    margin: 0;
-    font-size: 1rem;
-    color: #00ff41;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-
-.section-icon {
-    font-size: 1.1rem;
-}
-
-.count-badge, .merge-badge, .entity-badge {
-    background: #444;
-    color: #fff;
-    padding: 0.25rem 0.5rem;
-    border-radius: 3px;
-    font-size: 0.8rem;
-    font-weight: 600;
-}
-
-.merge-badge { background: #9620c0; }
-.entity-badge { background: #ff6b6b; }
-
-.toggle-section-btn {
-    background: none;
-    border: none;
-    color: #999;
-    cursor: pointer;
-    padding: 0.25rem;
-    transition: color 0.3s ease;
-}
-
-.toggle-section-btn:hover {
-    color: #00ff41;
-}
-
-.toggle-icon {
-    transition: transform 0.3s ease;
-}
-
-/* === RELATIONSHIP SECTIONS === */
-.relationship-list {
-    padding: 1rem 1.5rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-}
-
-.relationship-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0.75rem;
-    background: rgba(255, 255, 255, 0.02);
-    border-radius: 4px;
-    border-left: 3px solid #444;
-    transition: all 0.3s ease;
-    animation: fadeIn 0.3s ease-out;
-}
-
-.relationship-compact {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    max-height: 200px;
-    overflow-y: auto;
-}
-
-.relationship-compact-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0.5rem;
-    background: rgba(255, 255, 255, 0.02);
-    border-radius: 4px;
-    font-size: 0.85rem;
-}
-
-.relationship-compact-item:hover {
-    background: rgba(255, 255, 255, 0.05);
-}
-
-@keyframes fadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
-}
-
-.relationship-item:hover {
-    background: rgba(255, 255, 255, 0.05);
-    border-left-color: #00ff41;
-}
-
-.relationship-source, .relationship-target {
-    font-family: 'Roboto Mono', monospace;
-    color: #e0e0e0;
-    cursor: pointer;
-    flex: 1;
-}
-
-.node-link-compact {
-    color: #00aaff;
-    text-decoration: none;
-    cursor: pointer;
-    font-family: 'Roboto Mono', monospace;
-}
-
-.node-link-compact:hover {
-    color: #00ff41;
-    text-decoration: underline;
-}
-
-.node-link::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 0;
-    height: 0;
-    background: rgba(0, 255, 65, 0.1);
-    border-radius: 50%;
-    transform: translate(-50%, -50%);
-    transition: width 0.6s, height 0.6s;
-}
-
-.node-link:hover::before {
-    width: 300px;
-    height: 300px;
-}
-
-.relationship-type {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    gap: 0.25rem;
-}
-
-.relation-label {
-    font-size: 0.8rem;
-    color: #999;
-    background: #333;
-    padding: 0.2rem 0.5rem;
-    border-radius: 3px;
-}
-
-.confidence-compact {
-    font-size: 0.7rem;
-    padding: 0.1rem 0.3rem;
-    border-radius: 2px;
-    font-weight: bold;
-}
-
-.confidence-indicator {
-    font-size: 0.7rem;
-    letter-spacing: 1px;
-}
-
-.confidence-compact.high { background: #00ff41; color: #000; }
-.confidence-compact.medium { background: #ff9900; color: #000; }
-.confidence-compact.low { background: #ff6b6b; color: #fff; }
-
-
-/* === ATTRIBUTES SECTION === */
+/* Attribute Lists */
 .attribute-list {
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
-    max-height: 300px;
+    gap: 0.3rem;
+    max-height: 250px;
     overflow-y: auto;
 }
 
 .attribute-item-compact {
     display: grid;
     grid-template-columns: 1fr 2fr;
-    gap: 0.5rem;
-    padding: 0.5rem;
+    gap: 0.4rem;
+    padding: 0.3rem;
     background: rgba(255, 255, 255, 0.02);
-    border-radius: 4px;
-    font-size: 0.85rem;
+    border-radius: 3px;
+    font-size: 0.75rem;
 }
 
 .attribute-key-compact {
@@ -1285,879 +920,189 @@ input[type="text"]:focus, select:focus {
 
 .attribute-value-compact {
     color: #e0e0e0;
-    font-family: 'Roboto Mono', monospace;
     word-break: break-word;
 }
 
-
-
-.category-header {
-    font-size: 0.9rem;
-    color: #ff9900;
-    font-weight: 600;
-    margin-bottom: 0.75rem;
-    padding-bottom: 0.25rem;
-    border-bottom: 1px solid #333;
-}
-
-
-
-.attr-key {
-    font-size: 0.8rem;
-    color: #999;
-    margin-bottom: 0.25rem;
-    font-weight: 500;
-}
-
-.attr-value {
-    color: #e0e0e0;
-    font-family: 'Roboto Mono', monospace;
-    font-size: 0.9rem;
-    word-break: break-word;
-}
-
-.array-value {
-    border: 1px solid #333;
-    border-radius: 4px;
-    overflow: hidden;
-}
-
-.array-summary {
-    background: #333;
-    padding: 0.5rem;
-    font-size: 0.8rem;
-    color: #999;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-}
-
-.array-summary:hover {
-    background: #3a3a3a;
-}
-
-.array-items {
-    padding: 0.5rem;
-    max-height: 120px;
+/* Relationship Lists */
+.relationship-compact {
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+    max-height: 180px;
     overflow-y: auto;
 }
 
-.array-value.expanded .array-items {
-    max-height: none;
-}
-
-.array-item {
-    padding: 0.25rem 0;
-    border-bottom: 1px solid #333;
-    font-size: 0.8rem;
-}
-
-.array-item:last-child {
-    border-bottom: none;
-}
-
-.array-more {
-    padding: 0.25rem 0;
-    font-style: italic;
-    color: #666;
-    font-size: 0.8rem;
-}
-
-.array-display {
-    font-family: 'Roboto Mono', monospace;
-    font-size: 0.8rem;
-}
-
-.array-display-item {
-    padding: 0.25rem 0;
-    border-bottom: 1px solid #333;
-}
-
-.array-display-item:last-child {
-    border-bottom: none;
-}
-
-.object-value .compact-object {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-}
-
-.object-display {
-    font-family: 'Roboto Mono', monospace;
-    font-size: 0.8rem;
-    background: rgba(0, 0, 0, 0.2);
-    padding: 0.5rem;
-    border-radius: 4px;
-    border: 1px solid #333;
-}
-
-.compact-pair {
-    display: flex;
-    gap: 0.5rem;
-}
-
-.compact-key {
-    color: #999;
-    font-size: 0.8rem;
-}
-
-.compact-value {
-    color: #e0e0e0;
-    font-size: 0.8rem;
-}
-
-.compact-more {
-    font-style: italic;
-    color: #666;
-    font-size: 0.8rem;
-}
-
-.certificate-list {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    max-height: 250px;
-    overflow-y: auto;
-}
-
-.certificate-item {
-    background: rgba(255, 255, 255, 0.02);
-    border: 1px solid #333;
-    border-radius: 4px;
-    padding: 0.5rem;
-}
-
-.certificate-summary {
+.relationship-compact-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    font-size: 0.85rem;
+    padding: 0.3rem;
+    background: rgba(255, 255, 255, 0.02);
+    border-radius: 3px;
+    font-size: 0.75rem;
 }
 
-.certificate-issuer {
-    color: #00ff41;
-    font-weight: 500;
-}
-
-.certificate-status {
-    font-size: 0.7rem;
-    padding: 0.1rem 0.3rem;
-    border-radius: 2px;
-    font-weight: bold;
-}
-
-.certificate-status.valid { background: #00ff41; color: #000; }
-.certificate-status.invalid { background: #ff6b6b; color: #fff; }
-.certificate-status.expired { background: #ff9900; color: #000; }
-
-.cert-summary-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+.relationship-list {
+    display: flex;
+    flex-direction: column;
     gap: 0.5rem;
-    margin-bottom: 1rem;
+    padding: 0.75rem;
 }
 
-.cert-stat-item {
-    text-align: center;
+.relationship-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     padding: 0.5rem;
     background: rgba(255, 255, 255, 0.02);
-    border: 1px solid #333;
-    border-radius: 4px;
+    border-radius: 3px;
+    border-left: 2px solid #444;
+    font-size: 0.75rem;
 }
 
-.cert-stat-value {
-    font-size: 1.2rem;
-    font-weight: 600;
-    color: #00ff41;
-    font-family: 'Roboto Mono', monospace;
+.relationship-item:hover {
+    background: rgba(255, 255, 255, 0.05);
+    border-left-color: #00ff41;
 }
 
-.cert-stat-label {
-    font-size: 0.8rem;
+.relationship-source, .relationship-target {
+    color: #e0e0e0;
+    cursor: pointer;
+    flex: 1;
+}
+
+.relationship-type {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 0.2rem;
+}
+
+.relation-label {
+    font-size: 0.7rem;
     color: #999;
-    margin-top: 0.25rem;
+    background: #333;
+    padding: 0.15rem 0.3rem;
+    border-radius: 2px;
 }
 
-/* Status badges - extends existing badge system */
-.cert-status.valid { background: #00ff41; color: #000; }
-.cert-status.invalid { background: #ff6b6b; color: #fff; }
-.cert-status.warning { background: #ff9900; color: #000; }
+.confidence-indicator {
+    font-size: 0.6rem;
+    letter-spacing: 1px;
+}
 
-/* Certificate links */
-.cert-link {
+.node-link-compact {
     color: #00aaff;
     text-decoration: none;
-    font-size: 0.85rem;
+    cursor: pointer;
+    font-size: 0.75rem;
 }
 
-.cert-link:hover {
+.node-link-compact:hover {
     color: #00ff41;
     text-decoration: underline;
 }
 
-/* === CORRELATION OBJECT LAYOUT === */
-.correlation-grid {
-    padding: 1rem 1.5rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-}
-
-.correlation-item {
-    background: rgba(255, 255, 255, 0.02);
-    border: 1px solid #333;
-    border-radius: 4px;
-    overflow: hidden;
-    transition: all 0.3s ease;
-}
-
-.correlation-item.expanded {
-    border-color: #00ff41;
-}
-
-.correlation-preview {
-    padding: 0.75rem;
-    font-family: 'Roboto Mono', monospace;
-    color: #e0e0e0;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.expand-btn {
-    background: none;
-    border: none;
-    color: #999;
+.node-link {
+    color: #00aaff;
+    text-decoration: none;
     cursor: pointer;
-    padding: 0.5rem;
-    transition: color 0.3s ease;
+    font-size: 0.75rem;
     position: relative;
-    overflow: hidden;
 }
 
-.expand-btn:hover {
+.node-link:hover {
     color: #00ff41;
+    text-decoration: underline;
 }
 
-.expand-btn::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 0;
-    height: 0;
-    background: rgba(0, 255, 65, 0.1);
-    border-radius: 50%;
-    transform: translate(-50%, -50%);
-    transition: width 0.6s, height 0.6s;
+.modal-title-icon {
+    margin-right: 0.4rem;
+    font-size: 1rem;
 }
 
-.expand-btn:hover::before {
-    width: 300px;
-    height: 300px;
+.modal-title-text {
+    font-family: 'Special Elite', monospace;
 }
 
-.expand-icon {
-    transition: transform 0.3s ease;
-}
-
-.correlation-item.expanded .expand-icon {
-    transform: rotate(180deg);
-}
-
-.correlation-full {
-    padding: 0.75rem;
-    background: rgba(0, 0, 0, 0.3);
-    border-top: 1px solid #333;
-    font-family: 'Roboto Mono', monospace;
-    font-size: 0.8rem;
-    color: #ccc;
-    word-break: break-all;
-}
-
-.correlation-full.hidden {
-    display: none;
-}
-
-.correlation-item.expanded .correlation-full.hidden {
-    display: block;
-}
-
-.correlation-attr-name {
-    color: #00ff41;
+.merge-badge, .count-badge {
+    background: #444;
+    color: #fff;
+    padding: 0.15rem 0.3rem;
+    border-radius: 2px;
+    font-size: 0.65rem;
     font-weight: 600;
-    text-transform: capitalize;
-}
-
-.correlation-hint {
-    color: #999;
-    cursor: help;
-    opacity: 0.7;
-}
-
-.correlation-hint:hover {
-    opacity: 1;
-    color: #00ff41;
-}
-
-.node-list {
-    padding: 1rem 1.5rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-}
-
-.node-link-item {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    padding: 0.5rem;
-    background: rgba(255, 255, 255, 0.02);
-    border-radius: 4px;
-    transition: all 0.3s ease;
-    cursor: pointer;
-    animation: fadeIn 0.3s ease-out;
-    position: relative;
-    overflow: hidden;
-}
-
-.node-link-item:hover {
-    background: rgba(255, 255, 255, 0.05);
-    border-left: 3px solid #00ff41;
-}
-
-.node-link-item::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 0;
-    height: 0;
-    background: rgba(0, 255, 65, 0.1);
-    border-radius: 50%;
-    transform: translate(-50%, -50%);
-    transition: width 0.6s, height 0.6s;
-}
-
-.node-link-item:hover::before {
-    width: 300px;
-    height: 300px;
-}
-
-.node-icon {
-    color: #00ff41;
-    font-size: 0.8rem;
-}
-
-.node-name {
-    flex: 1;
-    font-family: 'Roboto Mono', monospace;
-    color: #e0e0e0;
-}
-
-.navigate-btn {
-    background: none;
-    border: 1px solid #444;
-    color: #999;
-    border-radius: 3px;
-    padding: 0.25rem 0.5rem;
-    cursor: pointer;
-    transition: all 0.3s ease;
-}
-
-.navigate-btn:hover {
-    border-color: #00ff41;
-    color: #00ff41;
-}
-
-/* === LARGE ENTITY LAYOUT === */
-.entity-stats {
-    padding: 1rem 1.5rem;
-}
-
-.stat-row {
-    display: flex;
-    justify-content: space-between;
-    padding: 0.5rem 0;
-    border-bottom: 1px solid #333;
-}
-
-.stat-row:last-child {
-    border-bottom: none;
-}
-
-.entity-node-grid {
-    padding: 1rem 1.5rem;
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 1rem;
-}
-
-.entity-node-card {
-    background: rgba(255, 255, 255, 0.02);
-    border: 1px solid #333;
-    border-radius: 4px;
-    overflow: hidden;
-    transition: all 0.3s ease;
-}
-
-.entity-node-card.expanded {
-    border-color: #00ff41;
-}
-
-.entity-node-header {
-    padding: 0.75rem;
-    background: rgba(0, 0, 0, 0.2);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    transition: all 0.3s ease;
-    position: relative;
-    overflow: hidden;
-}
-
-.entity-node-header:hover {
-    background: rgba(0, 255, 65, 0.1);
-}
-
-.entity-node-header::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 0;
-    height: 0;
-    background: rgba(0, 255, 65, 0.1);
-    border-radius: 50%;
-    transform: translate(-50%, -50%);
-    transition: width 0.6s, height 0.6s;
-}
-
-.entity-node-header:hover::before {
-    width: 300px;
-    height: 300px;
-}
-
-.expand-indicator {
-    margin-left: auto;
-    transition: transform 0.3s ease;
-}
-
-.entity-node-card.expanded .expand-indicator {
-    transform: rotate(180deg);
-}
-
-.entity-node-details {
-    display: none;
-    padding: 1rem;
-    border-top: 1px solid #333;
-}
-
-.entity-node-card.expanded .entity-node-details {
-    display: block;
-}
-
-/* === DESCRIPTION SECTION === */
-.description-content {
-    padding: 1rem 1.5rem;
-    color: #ccc;
-    line-height: 1.6;
-    font-style: italic;
 }
 
 /* Footer */
 .footer {
-    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
-    border-top: 2px solid #333;
-    padding: 1.25rem 2rem;
+    background: #0a0a0a;
+    border-top: 1px solid #333;
+    padding: 0.75rem;
     text-align: center;
-    font-size: 0.85rem;
+    font-size: 0.7rem;
     color: #999;
 }
 
 .footer-content {
-    max-width: 1400px;
+    /*max-width: 1400px;*/
     margin: 0 auto;
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: 1rem;
+    gap: 0.75rem;
     flex-wrap: wrap;
 }
 
 .footer-separator {
-    margin: 0 1rem;
     color: #555;
 }
 
-/* API Key Modal Styles */
-.apikey-section {
-    margin-bottom: 1.5rem;
-}
-
-.apikey-section label {
-    display: block;
-    margin-bottom: 0.5rem;
-    color: #c7c7c7;
-    font-size: 0.9rem;
-    font-weight: 500;
-}
-
-.apikey-section input[type="password"] {
-    width: 100%;
-    padding: 0.75rem;
-    background-color: #1a1a1a;
-    border: 1px solid #555;
-    color: #c7c7c7;
-    font-family: 'Roboto Mono', monospace;
-    font-size: 0.9rem;
-    transition: border-color 0.3s ease, box-shadow 0.3s ease;
-}
-
-.apikey-section input[type="password"]:focus {
-    outline: none;
-    border-color: #00ff41;
-    box-shadow: 0 0 5px rgba(0, 255, 65, 0.5);
-}
-
-.apikey-help {
-    font-size: 0.8rem;
-    color: #666;
-    margin-top: 0.25rem;
-    font-style: italic;
-}
-
-.api-key-set-message {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0.75rem;
-    background: #2c5c34;
-    border: 1px solid #3a7a48;
-    border-radius: 4px;
-    color: #e0e0e0;
-}
-
-.api-key-set-text {
-    font-family: 'Roboto Mono', monospace;
-    font-size: 0.9rem;
-}
-
-.clear-api-key-btn {
-    background: none;
-    border: 1px solid #555;
-    color: #c7c7c7;
-    padding: 0.25rem 0.5rem;
-    border-radius: 3px;
-    cursor: pointer;
-    font-size: 0.8rem;
-    transition: all 0.3s ease;
-}
-
-.clear-api-key-btn:hover {
-    border-color: #ff6b6b;
-    color: #ff6b6b;
-}
-
-/* Message Toasts */
+/* Message System */
 .message-container {
     position: fixed;
-    top: 20px;
-    right: 20px;
+    top: 15px;
+    right: 15px;
     z-index: 1002;
-    max-width: 400px;
-    pointer-events: auto;
+    max-width: 350px;
 }
 
 .message-toast {
-    margin-bottom: 10px;
+    margin-bottom: 8px;
     border-radius: 4px;
-    font-family: 'Roboto Mono', monospace;
-    font-size: 0.9rem;
-    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
+    font-size: 0.8rem;
     animation: slideInRight 0.3s ease-out;
-    pointer-events: auto;
 }
 
 .message-toast.success {
     background: #2c5c34;
-    border-left: 4px solid #00ff41;
+    border-left: 3px solid #00ff41;
 }
 
 .message-toast.error {
     background: #5c2c2c;
-    border-left: 4px solid #ff6b6b;
+    border-left: 3px solid #ff6b6b;
 }
 
 .message-toast.warning {
     background: #5c4c2c;
-    border-left: 4px solid #ff9900;
+    border-left: 3px solid #ff9900;
 }
 
 .message-toast.info {
     background: #2c3e5c;
-    border-left: 4px solid #00aaff;
+    border-left: 3px solid #00aaff;
 }
 
-@keyframes slideInRight {
-    from {
-        transform: translateX(100%);
-        opacity: 0;
-    }
-    to {
-        transform: translateX(0);
-        opacity: 1;
-    }
-}
-
-@keyframes slideOutRight {
-    from {
-        transform: translateX(0);
-        opacity: 1;
-    }
-    to {
-        transform: translateX(100%);
-        opacity: 0;
-    }
-}
-
-/* Large Entity Node Details */
-.large-entity-nodes-list {
-    margin-top: 1rem;
-}
-
-.large-entity-node-details {
-    margin-bottom: 0.5rem;
-    border: 1px solid #333;
-    border-radius: 3px;
-}
-
-.large-entity-node-details summary {
-    padding: 0.5rem;
-    background-color: #3a3a3a;
-    cursor: pointer;
-    outline: none;
-}
-
-.large-entity-node-details summary:hover {
-    background-color: #4a4a4a;
-}
-
-.large-entity-node-details .detail-row {
-    margin-left: 1rem;
-    margin-right: 1rem;
-}
-
-.large-entity-node-details .detail-section-header {
-    margin-left: 1rem;
-    margin-right: 1rem;
-}
-
-/* Legacy Detail Styles for Compatibility */
-.detail-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 0.75rem;
-    padding-bottom: 0.25rem;
-    border-bottom: 1px solid #333;
-}
-
-.detail-label {
-    color: #999;
-    font-weight: 500;
-}
-
-.detail-value {
-    color: #c7c7c7;
-    word-break: break-word;
-}
-
-.detail-section-header {
-    font-size: 1rem;
-    color: #00ff41;
-    font-weight: 500;
-    margin-top: 1.5rem;
-    margin-bottom: 0.75rem;
-    padding-bottom: 0.5rem;
-    border-bottom: 1px solid #444;
-}
-
-.detail-section-header:first-of-type {
-    margin-top: 0;
-}
-
-.copy-btn {
-    background: none;
-    border: none;
-    color: #666;
-    cursor: pointer;
-    font-size: 1rem;
-    margin-left: 10px;
-    transition: color 0.3s ease;
-}
-
-.copy-btn:hover {
-    color: #00ff41;
-}
-
-.status-icon {
-    margin-left: 5px;
-}
-
-.error {
-    color: #ff6b6b !important;
-    border-color: #ff6b6b !important;
-}
-
-.success {
-    color: #00ff41 !important;
-}
-
-.fade-in {
-    animation: enhancedFadeIn 0.5s ease-out;
-}
-
-@keyframes enhancedFadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-/* Utility Classes */
-.hidden {
-    display: none !important;
-}
-
-/* Graph specific styles */
-.vis-network {
-    background-color: #1a1a1a !important;
-}
-
-.vis-tooltip {
-    background-color: #2a2a2a !important;
-    border: 1px solid #444 !important;
-    color: #c7c7c7 !important;
-    font-family: 'Roboto Mono', monospace !important;
-    font-size: 0.8rem !important;
-}
-
-/* === RESPONSIVE DESIGN === */
-@media (max-width: 768px) {
-    .main-content {
-        padding: 0.75rem;
-        gap: 0.75rem;
-    }
-    
-    .header {
-        padding: 1rem;
-    }
-    
-    .header-content {
-        flex-direction: column;
-        gap: 1rem;
-        text-align: center;
-    }
-    
-    .button-group {
-        flex-direction: column;
-    }
-    
-    .legend {
-        padding: 0.5rem 0.75rem;
-        gap: 0.75rem;
-    }
-    
-    .provider-list {
-        padding: 0.75rem;
-    }
-    
-    .modal-content {
-        width: 95%;
-        margin: 5% auto;
-        max-height: 90vh;
-    }
-    
-    .modal-details {
-        padding: 0.75rem;
-        gap: 0.5rem;
-    }
-    
-    .entity-node-grid {
-        grid-template-columns: 1fr;
-    }
-    
-    .quick-stats {
-        flex-direction: column;
-        gap: 0.5rem;
-    }
-    
-    .relationship-item {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 0.5rem;
-    }
-    
-    .status-row {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 0.5rem;
-    }
-    
-    .footer-content {
-        flex-direction: column;
-        gap: 0.5rem;
-    }
-}
-
-/* Add these styles to the existing main.css file - they use existing design patterns */
-
-/* Settings Modal Enhancements - using existing provider-item styles */
-#settings-modal .modal-section {
-    margin-bottom: 1.5rem;
-}
-
-#settings-modal .modal-section:last-child {
-    margin-bottom: 0;
-}
-
-/* Provider configuration section using existing provider-item styling */
-#provider-config-list .provider-item {
-    margin-bottom: 1rem;
-    background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%);
-    border: 1px solid #333;
-    border-radius: 8px;
-    transition: all 0.3s ease;
-}
-
-#provider-config-list .provider-item:last-child {
-    margin-bottom: 0;
-}
-
-#provider-config-list .provider-item:hover {
-    border-color: #444;
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-}
-
-/* Provider toggle styling - extends existing checkbox pattern */
+/* Settings Modal Specific */
 .provider-toggle {
     appearance: none !important;
-    width: 16px !important;
-    height: 16px !important;
-    border: 2px solid #555 !important;
+    width: 12px !important;
+    height: 12px !important;
+    border: 1px solid #555 !important;
     background: #1a1a1a !important;
     cursor: pointer !important;
-    position: relative !important;
-    border-radius: 3px !important;
-    transition: all 0.3s ease !important;
-    margin: 0 !important;
+    border-radius: 2px !important;
 }
 
 .provider-toggle:checked {
@@ -2168,49 +1113,37 @@ input[type="text"]:focus, select:focus {
 .provider-toggle:checked::after {
     content: '✓' !important;
     position: absolute !important;
-    top: -3px !important;
+    top: -2px !important;
     left: 1px !important;
     color: #1a1a1a !important;
-    font-size: 12px !important;
+    font-size: 10px !important;
     font-weight: bold !important;
 }
 
-.provider-toggle:hover {
-    border-color: #00ff41 !important;
-    box-shadow: 0 0 5px rgba(0, 255, 65, 0.3) !important;
-}
-
-/* API Key status row styling - uses existing status-row pattern */
 .api-key-status-row {
-    padding: 0.75rem;
-    border-radius: 4px;
+    padding: 0.5rem;
+    border-radius: 3px;
     border: 1px solid;
     transition: all 0.3s ease;
-    margin-top: 0.5rem;
+    margin-top: 0.4rem;
+    font-size: 0.75rem;
 }
 
-.api-key-status-row.configured {
-    background: rgba(0, 255, 65, 0.1);
-    border-color: rgba(0, 255, 65, 0.3);
-}
-
-.api-key-status-row.not-configured {
-    background: rgba(255, 153, 0, 0.1);
-    border-color: rgba(255, 153, 0, 0.3);
-}
-
-/* Settings modal button styling - uses existing button classes */
-#settings-modal .button-group {
-    padding-top: 1.5rem;
-    border-top: 1px solid #333;
-    margin-top: 1.5rem;
-}
-
-/* Clear button specific styling - extends btn-secondary */
 .clear-api-key-btn {
-    font-size: 0.8rem !important;
-    padding: 0.4rem 0.8rem !important;
+    font-size: 0.7rem !important;
+    padding: 0.3rem 0.5rem !important;
     min-width: auto !important;
+    background: none;
+    border: 1px solid #555;
+    color: #c7c7c7;
+    border-radius: 2px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.clear-api-key-btn:hover {
+    border-color: #ff6b6b;
+    color: #ff6b6b;
 }
 
 .clear-api-key-btn:disabled {
@@ -2218,81 +1151,176 @@ input[type="text"]:focus, select:focus {
     cursor: not-allowed !important;
 }
 
-/* Provider configuration checkbox label styling */
-#provider-config-list .status-row label {
+input[type="password"] {
+    width: 100%;
+    padding: 0.5rem;
+    background: #1a1a1a;
+    border: 1px solid #444;
+    border-radius: 3px;
     color: #e0e0e0;
-    cursor: pointer;
-    transition: color 0.3s ease;
-    font-size: 0.9rem;
-    font-weight: 500;
+    font-family: 'Roboto Mono', monospace;
+    font-size: 0.75rem;
+    transition: border-color 0.3s ease;
 }
 
-#provider-config-list .status-row label:hover {
+input[type="password"]:focus {
+    outline: none;
+    border-color: #00ff41;
+    box-shadow: 0 0 5px rgba(0, 255, 65, 0.3);
+}
+
+.apikey-help {
+    font-size: 0.65rem;
+    color: #666;
+    margin-top: 0.3rem;
+    font-style: italic;
+    line-height: 1.3;
+}
+
+/* Context Menu */
+.graph-context-menu {
+    position: fixed;
+    z-index: 1000;
+    background: #2a2a2a;
+    border: 1px solid #444;
+    border-radius: 4px;
+    display: none;
+    font-size: 0.8rem;
+    min-width: 160px;
+}
+
+.graph-context-menu ul {
+    list-style: none;
+    padding: 0.3rem 0;
+    margin: 0;
+}
+
+.graph-context-menu ul li {
+    padding: 0.5rem 0.75rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+}
+
+.graph-context-menu ul li:hover {
+    background: #3a3a3a;
     color: #00ff41;
 }
 
-/* Settings section count badges - uses existing merge-badge styling */
-#provider-count,
-#api-key-count {
-    background: #444;
-    color: #fff;
-    padding: 0.25rem 0.5rem;
-    border-radius: 3px;
+.menu-icon {
     font-size: 0.8rem;
-    font-weight: 600;
-    min-width: 20px;
+    width: 1rem;
     text-align: center;
 }
 
-/* API key help text styling - uses existing patterns */
-#settings-modal .apikey-help {
-    font-size: 0.8rem;
-    color: #666;
-    margin-top: 0.5rem;
-    font-style: italic;
-    line-height: 1.4;
+/* Scrollbars */
+::-webkit-scrollbar {
+    width: 6px;
 }
 
-/* Modal section content spacing */
-#settings-modal .modal-section-content {
-    padding: 1rem;
+::-webkit-scrollbar-track {
+    background: #1a1a1a;
 }
 
-#settings-modal .modal-section-content .provider-item {
-    padding: 1rem;
+::-webkit-scrollbar-thumb {
+    background: #444;
+    border-radius: 3px;
 }
 
-/* Transition effects for API key clearing */
-.api-key-clearing {
-    opacity: 0.6;
-    pointer-events: none;
-    transition: all 0.3s ease;
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
 }
 
-.api-key-cleared {
-    opacity: 0;
-    transform: translateX(-10px);
-    transition: all 0.3s ease;
+/* Animations */
+@keyframes slideInRight {
+    from { transform: translateX(100%); opacity: 0; }
+    to { transform: translateX(0); opacity: 1; }
 }
 
-/* Settings modal responsiveness - extends existing responsive patterns */
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+.fade-in {
+    animation: fadeIn 0.3s ease-out;
+}
+
+/* Utility Classes */
+.hidden {
+    display: none !important;
+}
+
+.success {
+    color: #00ff41 !important;
+}
+
+.error {
+    color: #ff6b6b !important;
+    border-color: #ff6b6b !important;
+}
+
+/* Status Value Animations */
+.status-value.status-running {
+    animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.7; }
+}
+
+/* Graph Library Overrides */
+.vis-network {
+    background-color: #1a1a1a !important;
+}
+
+.vis-tooltip {
+    background-color: #2a2a2a !important;
+    border: 1px solid #444 !important;
+    color: #c7c7c7 !important;
+    font-family: 'Roboto Mono', monospace !important;
+    font-size: 0.7rem !important;
+    border-radius: 3px !important;
+}
+
+.node-info-popup {
+    position: fixed;
+    background: rgba(42, 42, 42, 0.95);
+    border: 1px solid #555;
+    padding: 0.75rem;
+    border-radius: 4px;
+    color: #c7c7c7;
+    font-family: 'Roboto Mono', monospace;
+    font-size: 0.7rem;
+    max-width: 280px;
+    z-index: 1001;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
+}
+
+/* Responsive */
 @media (max-width: 768px) {
-    #settings-modal .modal-content {
-        width: 95%;
-        margin: 5% auto;
-        max-height: 90vh;
-    }
-    
-    #provider-config-list .provider-item {
-        margin-bottom: 0.75rem;
-    }
-    
-    #settings-modal .provider-stats {
+    .main-content {
         grid-template-columns: 1fr;
-        gap: 0.5rem;
+        grid-template-areas:
+            "control"
+            "status"
+            "visualization"
+            "providers";
+        padding: 0.5rem;
     }
     
-    #settings-modal .button-group {
-        flex-direction: column;
+    .modal-content {
+        width: 95%;
+        margin: 2% auto;
+    }
+    
+    .graph-container {
+        height: 400px;
+    }
+    
+    .provider-list {
+        grid-template-columns: 1fr;
     }
 }
\ No newline at end of file