:root {
    /* Default Dark Mode Variables */
    --bg-color: #050505;
    --text-main: #ffffff;
    --text-muted: #9ca3af;
    --card-border: rgba(255, 255, 255, 0.1);
    --card-bg-hover: #0a0a0a;
    --bg-card-rgb: 10, 10, 10;

    /* --- THE PALETTE (Dark Mode / Neon) --- */
    --color-pink: #ff1493;
    --color-blue: #00bfff;
    --color-yellow: #ffff00;
    --color-green: #00ff00;
    --color-purple: #bf00ff; /* Electric Purple */

    /* New Colors */
    --color-red: #ff2a2a;
    --color-orange: #ffae00;
    --color-cyan: #00ffff;
    --color-teal: #00ced1;
}

/* --- LIGHT MODE OVERRIDES --- */
html.light {
    --bg-color: #f3f4f6;
    --text-main: #111827;
    --text-muted: #4b5563;
    --card-border: #262626; /* Dark black to match pills */
    --card-bg-hover: #ffffff;
    --bg-card-rgb: 255, 255, 255;

    --color-yellow: #ea580c; /* Readable Orange */
    --color-blue: #0284c7;
    --color-pink: #db2777;
    --color-green: #16a34a;
    --color-purple: #9333ea; /* Readable Purple */

    /* New Colors Light Mode */
    --color-red: #dc2626;
    --color-orange: #d97706;
    --color-cyan: #0891b2;
    --color-teal: #0d9488;
}

/* Light mode glass effects */
html.light .bento-card {
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

html.light .filter-time-btn,
html.light .filter-cat-btn,
html.light .filter-severity-btn,
html.light .theme-toggle-btn {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

html.light #modal-content {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Light mode button text contrast fixes */
html.light .filter-time-btn,
html.light .filter-severity-btn {
    color: var(--text-main) !important;
}

html.light .filter-time-btn.text-\[var\(--text-muted\)\],
html.light .filter-severity-btn.text-\[var\(--text-muted\)\] {
    color: var(--text-muted) !important;
}

html.light .filter-cat-btn {
    color: var(--text-main) !important;
}

html.light .filter-cat-btn.text-\[var\(--text-muted\)\] {
    color: var(--text-muted) !important;
}

/* Active states with bright colors */
html.light .filter-time-btn.bg-\[var\(--card-border\)\],
html.light .filter-severity-btn.bg-\[var\(--card-border\)\] {
    color: var(--text-main) !important;
    background-color: var(--card-border) !important;
}

html.light .filter-cat-btn.bg-\[var\(--card-border\)\] {
    color: var(--text-main) !important;
    background-color: var(--card-border) !important;
}

/* Hover states with bright colors */
html.light .filter-cat-btn:hover,
html.light .filter-severity-btn:hover {
    color: var(--text-main) !important;
}

/* Hover Color Overrides for Light Mode */
html.light .filter-cat-btn:hover.text-neon-pink,
html.light .filter-severity-btn:hover.text-neon-pink { color: var(--color-pink) !important; border-color: var(--color-pink) !important; }

html.light .filter-cat-btn:hover.text-neon-purple,
html.light .filter-severity-btn:hover.text-neon-purple { color: var(--color-purple) !important; border-color: var(--color-purple) !important; }

html.light .filter-cat-btn:hover.text-neon-yellow,
html.light .filter-severity-btn:hover.text-neon-yellow { color: var(--color-yellow) !important; border-color: var(--color-yellow) !important; }

html.light .filter-cat-btn:hover.text-electric-blue,
html.light .filter-severity-btn:hover.text-electric-blue { color: var(--color-blue) !important; border-color: var(--color-blue) !important; }

html.light .filter-cat-btn:hover.text-neon-green,
html.light .filter-severity-btn:hover.text-neon-green { color: var(--color-green) !important; border-color: var(--color-green) !important; }

html.light .filter-cat-btn:hover.text-neon-red,
html.light .filter-severity-btn:hover.text-neon-red { color: var(--color-red) !important; border-color: var(--color-red) !important; }

html.light .filter-cat-btn:hover.text-neon-orange,
html.light .filter-severity-btn:hover.text-neon-orange { color: var(--color-orange) !important; border-color: var(--color-orange) !important; }

html.light .filter-cat-btn:hover.text-neon-cyan,
html.light .filter-severity-btn:hover.text-neon-cyan { color: var(--color-cyan) !important; border-color: var(--color-cyan) !important; }

html.light .filter-cat-btn:hover.text-neon-teal,
html.light .filter-severity-btn:hover.text-neon-teal { color: var(--color-teal) !important; border-color: var(--color-teal) !important; }


body {
    background-color: var(--bg-color);
    color: var(--text-main);
    overflow-x: hidden;
    cursor: default;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- PARTICLE BACKGROUND --- */
#particle-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* --- BENTO CARD STYLES --- */
.bento-card {
    background-color: transparent;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 1px solid var(--card-border);
    border-radius: 1.5rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 10;
    min-height: 240px;
    contain: layout style paint;
}

.bento-card .flex.flex-col.h-full {
    height: 100%;
    overflow: hidden;
}

.bento-card .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bento-card .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bento-card:hover {
    transform: translateY(-5px); /* Lift Effect */
    background-color: var(--card-bg-hover);
    box-shadow: 0 15px 50px -10px rgba(0,0,0,0.3); /* Enhanced Shadow */
}

/* Specific Color Cards */
.card-yellow { border-color: var(--card-border); }
.card-yellow:hover { border-color: var(--color-yellow); box-shadow: 0 0 30px -5px var(--color-yellow); }

.card-blue { border-color: var(--card-border); }
.card-blue:hover { border-color: var(--color-blue); box-shadow: 0 0 30px -5px var(--color-blue); }

.card-green { border-color: var(--card-border); }
.card-green:hover { border-color: var(--color-green); box-shadow: 0 0 30px -5px var(--color-green); }

.card-pink { border-color: var(--card-border); }
.card-pink:hover { border-color: var(--color-pink); box-shadow: 0 0 30px -5px var(--color-pink); }

.card-purple { border-color: var(--card-border); }
.card-purple:hover { border-color: var(--color-purple); box-shadow: 0 0 30px -5px var(--color-purple); }

/* New Card Colors */
.card-red { border-color: var(--card-border); }
.card-red:hover { border-color: var(--color-red); box-shadow: 0 0 30px -5px var(--color-red); }

.card-orange { border-color: var(--card-border); }
.card-orange:hover { border-color: var(--color-orange); box-shadow: 0 0 30px -5px var(--color-orange); }

.card-cyan { border-color: var(--card-border); }
.card-cyan:hover { border-color: var(--color-cyan); box-shadow: 0 0 30px -5px var(--color-cyan); }

.card-teal { border-color: var(--card-border); }
.card-teal:hover { border-color: var(--color-teal); box-shadow: 0 0 30px -5px var(--color-teal); }

/* Gray/Profile Card */
.card-gray { border-color: var(--card-border); }
.card-gray:hover { border-color: var(--text-muted); box-shadow: 0 0 30px -5px rgba(128, 128, 128, 0.1); }

/* Tag Pills */
.tag-pill {
    padding: 0.25rem 0.75rem;
    background-color: rgba(128, 128, 128, 0.05);
    border: 1px solid var(--card-border);
    border-radius: 0.5rem;
    font-size: 0.625rem;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-muted);
    text-transform: uppercase;
    transition: all 0.3s ease;
}

/* Forced Cyan for MITRE */
.tag-pill-cyan {
    padding: 0.25rem 0.75rem;
    background-color: rgba(0, 255, 255, 0.05);
    border: 1px solid var(--color-cyan);
    border-radius: 0.5rem;
    font-size: 0.625rem;
    font-family: 'JetBrains Mono', monospace;
    color: var(--color-cyan);
    text-transform: uppercase;
    transition: all 0.3s ease;
}


.card-blue:hover .tag-pill { background-color: rgba(0, 191, 255, 0.05); border-color: var(--color-blue); color: var(--color-blue); }
.card-green:hover .tag-pill { background-color: rgba(0, 255, 0, 0.05); border-color: var(--color-green); color: var(--color-green); }
.card-pink:hover .tag-pill { background-color: rgba(255, 20, 147, 0.05); border-color: var(--color-pink); color: var(--color-pink); }
.card-purple:hover .tag-pill { background-color: rgba(191, 0, 255, 0.05); border-color: var(--color-purple); color: var(--color-purple); }
.card-yellow:hover .tag-pill { background-color: rgba(255, 255, 0, 0.05); border-color: var(--color-yellow); color: var(--color-yellow); }
/* New Tag Pill Hover Colors */
.card-red:hover .tag-pill { background-color: rgba(255, 42, 42, 0.05); border-color: var(--color-red); color: var(--color-red); }
.card-orange:hover .tag-pill { background-color: rgba(255, 174, 0, 0.05); border-color: var(--color-orange); color: var(--color-orange); }
.card-cyan:hover .tag-pill { background-color: rgba(0, 255, 255, 0.05); border-color: var(--color-cyan); color: var(--color-cyan); }
.card-teal:hover .tag-pill { background-color: rgba(0, 206, 209, 0.05); border-color: var(--color-teal); color: var(--color-teal); }

/* Modal Pills */
.pill-custom {
    padding: 0.25rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    font-weight: 600;
}
.pill-yellow { color: var(--color-yellow); border-color: var(--color-yellow); background-color: rgba(255, 255, 0, 0.05); }
.pill-blue { color: var(--color-blue); border-color: var(--color-blue); background-color: rgba(0, 191, 255, 0.05); }
.pill-green { color: var(--color-green); border-color: var(--color-green); background-color: rgba(0, 255, 0, 0.05); }
.pill-pink { color: var(--color-pink); border-color: var(--color-pink); background-color: rgba(255, 20, 147, 0.05); }
.pill-purple { color: var(--color-purple); border-color: var(--color-purple); background-color: rgba(191, 0, 255, 0.05); }
/* New Pills */
.pill-red { color: var(--color-red); border-color: var(--color-red); background-color: rgba(255, 42, 42, 0.05); }
.pill-orange { color: var(--color-orange); border-color: var(--color-orange); background-color: rgba(255, 174, 0, 0.05); }
.pill-cyan { color: var(--color-cyan); border-color: var(--color-cyan); background-color: rgba(0, 255, 255, 0.05); }
.pill-teal { color: var(--color-teal); border-color: var(--color-teal); background-color: rgba(0, 206, 209, 0.05); }

.pill-gray { color: var(--text-muted); border-color: var(--card-border); background-color: rgba(128, 128, 128, 0.05); }

/* --- FILTER BUTTONS GLOBAL --- */
/* Base filter button style */
.filter-btn-base,
.filter-cat-btn,
.filter-severity-btn,
.filter-time-btn {
    transition: all 0.3s ease;
    border: 1px solid; /* Always visible border */
    background-color: rgba(20, 20, 20, 0.6); /* Dimmed background default */
    backdrop-filter: blur(4px);
}

.filter-btn-base:hover,
.filter-cat-btn:hover,
.filter-severity-btn:hover,
.filter-time-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* --- CATEGORY FILTER BUTTONS --- */
/* Inactive states now have colored borders */
.cat-all-color { color: var(--text-muted); border-color: var(--card-border); }
.cat-adversary-color { color: var(--text-muted); border-color: var(--color-pink); }
.cat-malware-color { color: var(--text-muted); border-color: var(--color-purple); }
.cat-vulnerability-color { color: var(--text-muted); border-color: var(--color-yellow); }
.cat-incident-color { color: var(--text-muted); border-color: var(--color-blue); }
.cat-technique-color { color: var(--text-muted); border-color: var(--color-green); }

/* --- SEVERITY FILTER BUTTONS --- */
.sev-all-color { color: var(--text-muted); border-color: var(--card-border); }
.sev-critical-color { color: var(--text-muted); border-color: var(--color-red); } /* Critical = Red */
.sev-high-color { color: var(--text-muted); border-color: var(--color-orange); } /* High = Orange */
.sev-medium-color { color: var(--text-muted); border-color: var(--color-yellow); } /* Medium = Yellow */
.sev-low-color { color: var(--text-muted); border-color: var(--color-blue); } /* Low = Blue */

/* --- ACTIVE FILTER BUTTONS STYLE (DARK MODE) --- */
/* When active, fill with color and make text bright */

/* Category Active */
.filter-cat-btn.active.cat-all-color { background-color: var(--card-border); color: var(--text-main); }
.filter-cat-btn.active.cat-adversary-color { background-color: rgba(255, 20, 147, 0.2); color: var(--color-pink); border-color: var(--color-pink); box-shadow: 0 0 10px var(--color-pink); }
.filter-cat-btn.active.cat-malware-color { background-color: rgba(191, 0, 255, 0.2); color: var(--color-purple); border-color: var(--color-purple); box-shadow: 0 0 10px var(--color-purple); }
.filter-cat-btn.active.cat-vulnerability-color { background-color: rgba(255, 255, 0, 0.2); color: var(--color-yellow); border-color: var(--color-yellow); box-shadow: 0 0 10px var(--color-yellow); }
.filter-cat-btn.active.cat-incident-color { background-color: rgba(0, 191, 255, 0.2); color: var(--color-blue); border-color: var(--color-blue); box-shadow: 0 0 10px var(--color-blue); }
.filter-cat-btn.active.cat-technique-color { background-color: rgba(0, 255, 0, 0.2); color: var(--color-green); border-color: var(--color-green); box-shadow: 0 0 10px var(--color-green); }

/* Severity Active */
.filter-severity-btn.active.sev-all-color { background-color: var(--card-border); color: var(--text-main); }
.filter-severity-btn.active.sev-critical-color { background-color: rgba(255, 42, 42, 0.2); color: var(--color-red); border-color: var(--color-red); box-shadow: 0 0 10px var(--color-red); }
.filter-severity-btn.active.sev-high-color { background-color: rgba(255, 174, 0, 0.2); color: var(--color-orange); border-color: var(--color-orange); box-shadow: 0 0 10px var(--color-orange); }
.filter-severity-btn.active.sev-medium-color { background-color: rgba(255, 255, 0, 0.2); color: var(--color-yellow); border-color: var(--color-yellow); box-shadow: 0 0 10px var(--color-yellow); }
.filter-severity-btn.active.sev-low-color { background-color: rgba(0, 191, 255, 0.2); color: var(--color-blue); border-color: var(--color-blue); box-shadow: 0 0 10px var(--color-blue); }

/* Time Filters (Generic) */
.filter-time-btn {
    border-color: var(--card-border); /* Default border */
    color: var(--text-muted);
}
.filter-time-btn:hover {
    border-color: var(--color-cyan);
    color: var(--color-cyan);
}
.filter-time-btn.active {
    background-color: rgba(0, 255, 255, 0.1);
    border-color: var(--color-cyan);
    color: var(--color-cyan) !important;
    box-shadow: 0 0 10px var(--color-cyan);
}


/* --- ACTIVE FILTER BUTTONS STYLE (LIGHT MODE) --- */
/* Re-map for light mode visibility */
html.light .filter-cat-btn.active.cat-all-color,
html.light .filter-severity-btn.active.sev-all-color {
    color: var(--text-main) !important;
    background-color: var(--card-border) !important;
    border-color: var(--card-border) !important;
}

html.light .filter-cat-btn.active.cat-adversary-color { background-color: var(--color-pink) !important; border-color: var(--color-pink) !important; color: white !important; }
html.light .filter-cat-btn.active.cat-malware-color { background-color: var(--color-purple) !important; border-color: var(--color-purple) !important; color: white !important; }
html.light .filter-cat-btn.active.cat-vulnerability-color { background-color: var(--color-yellow) !important; border-color: var(--color-yellow) !important; color: white !important; }
html.light .filter-cat-btn.active.cat-incident-color { background-color: var(--color-blue) !important; border-color: var(--color-blue) !important; color: white !important; }
html.light .filter-cat-btn.active.cat-technique-color { background-color: var(--color-green) !important; border-color: var(--color-green) !important; color: white !important; }

html.light .filter-severity-btn.active.sev-critical-color { background-color: var(--color-red) !important; border-color: var(--color-red) !important; color: white !important; }
html.light .filter-severity-btn.active.sev-high-color { background-color: var(--color-orange) !important; border-color: var(--color-orange) !important; color: white !important; }
html.light .filter-severity-btn.active.sev-medium-color { background-color: var(--color-yellow) !important; border-color: var(--color-yellow) !important; color: white !important; }
html.light .filter-severity-btn.active.sev-low-color { background-color: var(--color-blue) !important; border-color: var(--color-blue) !important; color: white !important; }


/* Modal Transitions */
#info-modal { transition: opacity 0.3s ease, visibility 0.3s ease; }
#info-modal.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
#info-modal:not(.hidden) { opacity: 1; visibility: visible; pointer-events: auto; }

#modal-content { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
#info-modal.hidden #modal-content { transform: scale(0.95) translateY(10px); }
#info-modal:not(.hidden) #modal-content { transform: scale(1) translateY(0); }

::selection { background: var(--color-yellow); color: #000; }

.theme-toggle-btn {
    background: transparent;
    border: 1px solid var(--card-border);
    color: var(--text-muted);
    padding: 0.5rem;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.theme-toggle-btn:hover {
    border-color: var(--text-main);
    color: var(--text-main);
}