/* Core OS Layout */
body { 
    background: #0a0a0a; 
    color: #eee; 
    font-family: 'Inter', system-ui, sans-serif; 
    margin: 0; 
    display: flex; 
    flex-direction: column; 
    height: 100vh; 
    overflow: hidden;
}

/* Navigation Architecture */
#nav-bar { 
    display: flex; 
    background: #111; 
    padding: 0 20px; 
    height: 50px;
    gap: 20px; 
    border-bottom: 1px solid #333; 
    align-items: center; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    z-index: 100;
}

.nav-item { 
    cursor: pointer; 
    font-size: 0.75rem; 
    font-weight: 600;
    letter-spacing: 1px;
    color: #666; 
    height: 100%;
    display: flex;
    align-items: center;
    transition: all 0.3s ease; 
    border-bottom: 2px solid transparent;
}

.nav-item:hover { color: #aaa; }

.nav-item.active { 
    color: #00ffff; 
    border-bottom: 2px solid #00ffff; 
    text-shadow: 0 0 10px rgba(0,255,255,0.3);
}

/* Main Display Area */
#card-container { 
    flex: 1; 
    padding: 25px; 
    overflow-y: auto; 
    background: radial-gradient(circle at top center, #111 0%, #0a0a0a 100%);
}

/* Sovereign Card Design */
.card { 
    background: #161616; 
    border: 1px solid #2a2a2a; 
    padding: 20px; 
    border-radius: 4px; 
    position: relative; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    transition: border 0.3s ease;
}

.card:hover { border-color: #444; }

.card h3 { 
    margin-top: 0; 
    font-size: 0.9rem; 
    letter-spacing: 1px; 
    color: #888;
    border-bottom: 1px solid #222;
    padding-bottom: 10px;
}

/* Heartbeat & Status */
#relay-heartbeat { 
    margin-left: auto; 
    font-family: 'Courier New', monospace; 
    font-size: 0.7rem; 
    color: #00ff88; 
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Map & Pulse Animations */
.map-link { 
    stroke-width: 2; 
    stroke-dasharray: 10; 
    animation: flow 2s linear infinite; 
    opacity: 0.5; 
}

@keyframes flow { 
    from { stroke-dashoffset: 20; } 
    to { stroke-dashoffset: 0; } 
}

/* Custom Scrollbar for the Void */
#card-container::-webkit-scrollbar { width: 6px; }
#card-container::-webkit-scrollbar-track { background: #0a0a0a; }
#card-container::-webkit-scrollbar-thumb { background: #222; border-radius: 10px; }
#card-container::-webkit-scrollbar-thumb:hover { background: #333; }