.dashboard { display: flex; flex-direction: column; gap: 32px; } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .stat-card { background-color: var(--secondary-color); border: 1px solid var(--border-color); padding: 24px; display: flex; align-items: center; gap: 20px; transition: all 0.3s ease; } .stat-card:hover { border-color: var(--text-color); box-shadow: var(--matrix-green-glow); transform: translateY(-2px); } .stat-icon { color: var(--accent-color); filter: drop-shadow(var(--violet-glow)); } .stat-content { display: flex; flex-direction: column; } .stat-label { font-size: 0.7rem; opacity: 0.6; letter-spacing: 1px; } .stat-value { font-size: 1.8rem; font-weight: bold; } .logs-section { background-color: var(--secondary-color); border: 1px solid var(--border-color); display: flex; flex-direction: column; } .section-header { padding: 16px 24px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; gap: 12px; } .section-header h2 { font-size: 0.9rem; letter-spacing: 2px; } .logs-table-container { overflow-x: auto; } .logs-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; text-align: left; } .logs-table th { padding: 12px 24px; border-bottom: 1px solid var(--border-color); opacity: 0.5; font-weight: normal; } .logs-table td { padding: 12px 24px; border-bottom: 1px solid rgba(48, 54, 61, 0.5); } .logs-table tr:hover { background-color: rgba(0, 255, 65, 0.03); } .raw-line { max-width: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dim { opacity: 0.5; } .loader { display: flex; align-items: center; justify-content: center; height: 200px; letter-spacing: 4px; animation: pulse 1s infinite alternate; } @keyframes pulse { from { opacity: 0.5; } to { opacity: 1; } } .spin { animation: spin 1.5s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }