/**
* NEXUS Memory MCP App Styles
* Designed for embedding in VS Code, Claude, and ChatGPT
* Dark theme optimized for IDE environments
*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--bg-primary: #0d1117;
--bg-secondary: #161b22;
--bg-tertiary: #21262d;
--border-color: #30363d;
--text-primary: #f0f6fc;
--text-secondary: #8b949e;
--text-muted: #6e7681;
--accent-primary: #58a6ff;
--accent-green: #3fb950;
--accent-yellow: #d29922;
--accent-red: #f85149;
--accent-purple: #a371f7;
--accent-cyan: #39d353;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
background: var(--bg-primary);
color: var(--text-primary);
font-size: 13px;
line-height: 1.5;
}
/* MCP App Container */
.mcp-app {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.mcp-app.loading {
align-items: center;
justify-content: center;
}
/* Loader */
.loader {
text-align: center;
}
.loader-brain {
font-size: 48px;
animation: pulse 1.5s ease-in-out infinite;
}
.loader-text {
margin-top: 16px;
color: var(--text-secondary);
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: 0.8; }
}
/* Header */
.mcp-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: var(--bg-secondary);
border-bottom: 1px solid var(--border-color);
}
.header-left {
display: flex;
align-items: center;
gap: 10px;
}
.header-left .logo {
font-size: 24px;
}
.header-left h1 {
font-size: 16px;
font-weight: 600;
}
.badge {
background: linear-gradient(135deg, var(--accent-green), var(--accent-cyan));
color: var(--bg-primary);
padding: 2px 8px;
border-radius: 12px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
}
.header-right {
display: flex;
align-items: center;
}
.sync-status {
display: flex;
align-items: center;
gap: 6px;
color: var(--text-secondary);
font-size: 12px;
}
.sync-dot {
width: 8px;
height: 8px;
background: var(--accent-green);
border-radius: 50%;
animation: blink 2s ease-in-out infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* Tabs */
.mcp-tabs {
display: flex;
gap: 4px;
padding: 8px 16px;
background: var(--bg-secondary);
border-bottom: 1px solid var(--border-color);
}
.tab {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: transparent;
border: none;
border-radius: 6px;
color: var(--text-secondary);
font-size: 13px;
cursor: pointer;
transition: all 0.2s ease;
}
.tab:hover {
background: var(--bg-tertiary);
color: var(--text-primary);
}
.tab.active {
background: var(--bg-tertiary);
color: var(--text-primary);
}
.tab-badge {
background: var(--accent-yellow);
color: var(--bg-primary);
padding: 1px 6px;
border-radius: 10px;
font-size: 10px;
font-weight: 600;
}
/* Main Content */
.mcp-content {
flex: 1;
padding: 16px;
overflow-y: auto;
}
/* Overview Grid */
.overview-grid {
display: flex;
flex-direction: column;
gap: 16px;
}
/* Stats Row */
.stats-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.stat-card {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 16px;
text-align: center;
}
.stat-card .stat-value {
font-size: 24px;
font-weight: 700;
color: var(--text-primary);
}
.stat-card .stat-label {
font-size: 11px;
color: var(--text-secondary);
margin-top: 4px;
text-transform: uppercase;
}
.stat-card.engram {
border-color: var(--accent-green);
background: linear-gradient(135deg, rgba(63, 185, 80, 0.1), transparent);
}
.stat-card.engram .stat-value {
color: var(--accent-green);
}
.stat-card.tensions {
border-color: var(--accent-yellow);
}
.stat-card.tensions .stat-value {
color: var(--accent-yellow);
}
/* Two Column Layout */
.two-column {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
/* Section */
.section {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 16px;
}
.section h3 {
font-size: 14px;
font-weight: 600;
margin-bottom: 12px;
color: var(--text-primary);
}
/* Memory Layers Component */
.memory-layers {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 16px;
}
.memory-layers h3 {
font-size: 14px;
font-weight: 600;
margin-bottom: 12px;
}
.layers-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 8px;
}
.layer-card {
background: var(--bg-tertiary);
border-radius: 6px;
padding: 12px 8px;
text-align: center;
transition: all 0.2s ease;
cursor: pointer;
}
.layer-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.layer-id {
font-size: 12px;
font-weight: 600;
color: var(--accent-primary);
margin-bottom: 4px;
}
.layer-name {
font-size: 10px;
color: var(--text-secondary);
margin-bottom: 8px;
}
.layer-count {
font-size: 18px;
font-weight: 700;
}
.layer-bar {
height: 4px;
background: var(--bg-primary);
border-radius: 2px;
margin-top: 8px;
overflow: hidden;
}
.layer-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--accent-primary), var(--accent-purple));
border-radius: 2px;
transition: width 0.5s ease;
}
/* Neural Mesh Mini */
.neural-mesh-mini {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 16px;
}
.neural-mesh-mini h3 {
font-size: 14px;
font-weight: 600;
margin-bottom: 12px;
}
.ganglions-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.ganglion {
background: var(--bg-tertiary);
border-radius: 6px;
padding: 8px;
text-align: center;
position: relative;
}
.ganglion.active::before {
content: '';
position: absolute;
top: 4px;
right: 4px;
width: 6px;
height: 6px;
background: var(--accent-green);
border-radius: 50%;
}
.ganglion-icon {
font-size: 20px;
margin-bottom: 4px;
}
.ganglion-name {
font-size: 9px;
color: var(--text-secondary);
text-transform: uppercase;
}
/* ENGRAM Stats */
.engram-stats {
background: var(--bg-secondary);
border: 1px solid var(--accent-green);
border-radius: 8px;
padding: 16px;
}
.engram-stats h3 {
font-size: 14px;
font-weight: 600;
margin-bottom: 12px;
color: var(--accent-green);
}
.engram-comparison {
display: flex;
flex-direction: column;
gap: 12px;
}
.comparison-row {
display: flex;
align-items: center;
gap: 12px;
}
.comparison-label {
width: 80px;
font-size: 11px;
color: var(--text-secondary);
}
.comparison-bar {
flex: 1;
height: 24px;
background: var(--bg-tertiary);
border-radius: 4px;
overflow: hidden;
position: relative;
}
.comparison-fill {
height: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 8px;
font-size: 11px;
font-weight: 600;
transition: width 1s ease;
}
.comparison-fill.linear {
background: linear-gradient(90deg, var(--accent-red), #dc2626);
color: white;
}
.comparison-fill.engram {
background: linear-gradient(90deg, var(--accent-green), var(--accent-cyan));
color: var(--bg-primary);
}
.speedup-badge {
background: rgba(63, 185, 80, 0.2);
border: 1px solid var(--accent-green);
color: var(--accent-green);
padding: 4px 10px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
text-align: center;
margin-top: 12px;
}
/* Tensions List */
.tensions-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.tension-item {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 12px;
display: flex;
align-items: flex-start;
gap: 12px;
}
.tension-icon {
font-size: 20px;
}
.tension-content {
flex: 1;
}
.tension-type {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 4px;
}
.tension-type.contradiction { color: var(--accent-red); }
.tension-type.outdated { color: var(--accent-yellow); }
.tension-type.duplicate { color: var(--accent-purple); }
.tension-description {
font-size: 13px;
color: var(--text-primary);
margin-bottom: 4px;
}
.tension-time {
font-size: 11px;
color: var(--text-muted);
}
.tension-action {
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 4px 8px;
font-size: 11px;
color: var(--text-secondary);
cursor: pointer;
}
.tension-action:hover {
border-color: var(--accent-primary);
color: var(--accent-primary);
}
/* Recent Memories */
.memories-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.memory-item {
background: var(--bg-tertiary);
border-radius: 6px;
padding: 12px;
display: flex;
align-items: flex-start;
gap: 10px;
}
.memory-layer-badge {
background: var(--accent-primary);
color: var(--bg-primary);
padding: 2px 6px;
border-radius: 4px;
font-size: 10px;
font-weight: 600;
}
.memory-content {
flex: 1;
font-size: 13px;
}
.memory-meta {
display: flex;
align-items: center;
gap: 8px;
margin-top: 6px;
}
.memory-time {
font-size: 11px;
color: var(--text-muted);
}
.memory-score {
font-size: 11px;
color: var(--accent-green);
}
/* Search Bar */
.search-bar {
margin-bottom: 16px;
}
.search-input {
width: 100%;
padding: 10px 14px;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 6px;
color: var(--text-primary);
font-size: 13px;
}
.search-input:focus {
outline: none;
border-color: var(--accent-primary);
}
.search-input::placeholder {
color: var(--text-muted);
}
/* Footer */
.mcp-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 16px;
background: var(--bg-secondary);
border-top: 1px solid var(--border-color);
font-size: 11px;
}
.powered-by {
color: var(--text-muted);
}
.mcp-footer a {
color: var(--accent-primary);
text-decoration: none;
}
.mcp-footer a:hover {
text-decoration: underline;
}
/* Responsive */
@media (max-width: 600px) {
.stats-row {
grid-template-columns: repeat(2, 1fr);
}
.layers-grid {
grid-template-columns: repeat(3, 1fr);
}
.two-column {
grid-template-columns: 1fr;
}
.ganglions-grid {
grid-template-columns: repeat(4, 1fr);
}
}
