:root {
    --bg: #05070a;
    --card: rgba(13, 17, 23, 0.4);
    --accent: #3b82f6;
    --danger: #ef4444;
    --success: #10b981;
    --border: rgba(255, 255, 255, 0.05);
}

body { 
    background: #05070a;
    color: #94a3b8;
    font-family: 'Outfit', sans-serif;
    letter-spacing: -0.01em;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 { 
    font-family: 'Outfit', sans-serif; 
    color: #fff;
    letter-spacing: -0.02em;
}

/* Bento Design System */
.bento-card { 
    background: var(--card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bento-card:hover {
    border-color: rgba(59, 130, 246, 0.3);
    background: rgba(13, 17, 23, 0.6);
}

/* Carbon Inputs */
.carbon-input {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    color: #fff;
    transition: all 0.2s;
}

.carbon-input:focus {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--accent);
    outline: none;
}

/* Glassmorphism */
.glass { 
    background: var(--card);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

.glass-hover:hover {
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.1);
}

/* Visual Effects */
.neon-blue { filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.6)); }
.neon-red { filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.6)); }

.hidden { display: none; }

/* Navigation & Tabs */
.sidebar-active {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.15) 0%, transparent 100%);
    border-left: 3px solid var(--accent);
    color: white;
}

.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn 0.3s ease-in-out; }

@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(10px); } 
    to { opacity: 1; transform: translateY(0); } 
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

.custom-scroll { 
    max-height: 600px; 
    overflow-y: auto; 
    padding-right: 4px;
}

pre::-webkit-scrollbar { width: 4px; }
pre::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 10px; }

/* List Styles */
.unmapped-row {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%) !important;
    box-shadow: inset 4px 0 0 rgba(255, 255, 255, 0.2);
}

.unmapped-row:hover {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, transparent 100%) !important;
}

/* Skeleton Loading */
@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

.skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%);
    background-size: 1000px 100%;
    animation: shimmer 2s infinite linear;
    border-radius: 12px;
}

.skeleton-text { height: 10px; width: 100%; margin-bottom: 8px; }
.skeleton-btn { height: 32px; width: 80px; border-radius: 12px; }
.skeleton-circle { height: 40px; width: 40px; border-radius: 50%; }

/* Attack Logs Detail Transitions */
@keyframes al-expand {
    from { opacity: 0; max-height: 0; }
    to   { opacity: 1; max-height: 400px; }
}

.al-detail-row td { padding: 0; }
.al-detail-inner {
    overflow: hidden;
    animation: al-expand 0.28s cubic-bezier(0.4,0,0.2,1) forwards;
}

.al-chevron { transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); }
.al-chevron.open { transform: rotate(180deg); }

.al-tf-btn.active {
    background: rgba(59,130,246,0.15);
    border-color: rgba(59,130,246,0.4);
    color: #fff;
}

#al-table tbody tr.al-main-row:hover td { background: rgba(255,255,255,0.025); }
#al-table tbody tr.al-main-row td { transition: background 0.15s; }

/* Modal & Interaction Animations */
@keyframes modalIn {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}