.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); } } /* Attacker Profiles */ .attacker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; padding: 16px; } .attacker-card { background: var(--secondary-color); border: 1px solid var(--border-color); padding: 16px; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .attacker-card:hover { transform: translateY(-2px); border-color: var(--text-color); box-shadow: var(--matrix-green-glow); } .traversal-badge { font-size: 0.65rem; padding: 2px 8px; border: 1px solid var(--accent-color); background: rgba(238, 130, 238, 0.1); color: var(--accent-color); letter-spacing: 2px; } .service-badge { font-size: 0.7rem; padding: 2px 8px; border: 1px solid var(--text-color); background: rgba(0, 255, 65, 0.05); color: var(--text-color); } .back-button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid var(--border-color); background: transparent; color: var(--text-color); cursor: pointer; font-size: 0.8rem; letter-spacing: 2px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .back-button:hover { border-color: var(--text-color); box-shadow: var(--matrix-green-glow); }