/* ===========================
    RESET & VARIABLES
=========================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #64ffda;
    --bg-dark: #0a192f;
    --bg-darker: #020c1b;
    --bg-card: #112240;
    --text-primary: #ccd6f6;
    --text-secondary: #8892b0;
    --accent: #64ffda;
    --accent-glow: rgba(100, 255, 218, 0.1);
    --border: rgba(100, 255, 218, 0.2);
    --red: #ff6b6b;
    --green: #51cf66;
    --blue: #4dabf7;
    --yellow: #ffd93d;
    --purple: #b197fc;
}

html {
    overflow-x: hidden;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg-darker);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

#particles-js {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

/* ===========================
   CATEGORY COLORS (shared)
=========================== */
.category-badge.web,    .toc-category.web,    .tag.web          { background: rgba(255, 107, 107, 0.1); color: #ff6b6b;  border-color: #ff6b6b; }
.category-badge.crypto, .toc-category.crypto, .tag.crypto       { background: rgba(81, 207, 102, 0.1);  color: #51cf66;  border-color: #51cf66; }
.category-badge.forensics, .toc-category.forensics, .tag.forensics { background: rgba(77, 171, 247, 0.1);  color: #4dabf7;  border-color: #4dabf7; }
.category-badge.reverse, .toc-category.reverse, .tag.reverse    { background: rgba(177, 151, 252, 0.1); color: #b197fc;  border-color: #b197fc; }
.category-badge.pwn,    .toc-category.pwn,    .tag.pwn          { background: rgba(255, 146, 43, 0.1);  color: #ff922b;  border-color: #ff922b; }
.category-badge.osint,  .toc-category.osint,  .tag.osint        { background: rgba(255, 212, 59, 0.1);  color: #ffd43b;  border-color: #ffd43b; }
.category-badge.misc,   .toc-category.misc,   .tag.misc         { background: rgba(100, 255, 218, 0.1); color: #64ffda;  border-color: #64ffda; }
.category-badge.steganography, .toc-category.steganography, .tag.steganography { background: rgba(247, 131, 172, 0.1); color: #f783ac; border-color: #f783ac; }
.category-badge.network, .toc-category.network, .tag.network    { background: rgba(34, 211, 238, 0.1);  color: #22d3ee;  border-color: #22d3ee; }
.category-badge.welcome, .toc-category.welcome, .tag.welcome     { background: rgba(255, 190, 76, 0.1);  color: #ffbe4c;  border-color: #ffbe4c; }
.category-badge.malware                                          { background: rgba(224, 49, 49, 0.1);   color: #e03131;  border-color: #e03131; }
.category-badge.others                                           { background: rgba(134, 142, 150, 0.1); color: #868e96;  border-color: #868e96; }
.category-badge.hardware                                         { background: rgba(230, 126, 34, 0.1);  color: #e67e22;  border-color: #e67e22; }
.category-badge.blockchain                                       { background: rgba(32, 201, 151, 0.1);  color: #20c997;  border-color: #20c997; }
.category-badge.mobile                                           { background: rgba(116, 192, 252, 0.1); color: #74c0fc;  border-color: #74c0fc; }
.category-badge.programming                                      { background: rgba(169, 227, 75, 0.1);  color: #a9e34b;  border-color: #a9e34b; }
.category-badge.trivia                                           { background: rgba(218, 119, 242, 0.1); color: #da77f2;  border-color: #da77f2; }

/* ===========================
    HEADER
=========================== */
.main-header {
    background: var(--bg-dark);
    padding: 12px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--border);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary);
}

.logo i {
    font-size: 1.2rem;
}

.nav-link {
    color: var(--text-secondary);
    font-size: 0.9rem;
    padding: 6px 12px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.nav-link:hover {
    color: var(--primary);
    background: var(--accent-glow);
}

.back-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.back-link:hover {
    color: var(--primary);
    transform: translateX(-5px);
}

/* ===========================
    FOOTER
=========================== */
footer {
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    padding: 25px 0;
    margin-top: 40px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

footer p {
    color: var(--text-secondary);
    margin: 0;
}

.footer-links {
    display: flex;
    align-items: center;
    gap: 15px;
}

.footer-links a {
    color: var(--text-secondary);
    transition: color 0.3s ease;
    position: relative;
}

.footer-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: width 0.3s ease;
}

.footer-links a:hover {
    color: var(--primary);
}

.footer-links a:hover::after {
    width: 100%;
}

.separator {
    color: var(--text-secondary);
    opacity: 0.5;
}

/* ===========================
    GLITCH TEXT
=========================== */
.glitch-text {
    font-size: 3.5rem;
    font-weight: 700;
    position: relative;
    color: var(--primary);
    animation: glitch 3s infinite;
}

@keyframes glitch {
    0%, 100% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
}

/* ===========================
    SCROLL PROGRESS BAR
=========================== */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #64ffda, #4dabf7);
    z-index: 9999;
    width: 0%;
    transition: width 0.1s ease;
}

/* ===========================
    RESPONSIVE
=========================== */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
    
    .glitch-text {
        font-size: 2.2rem;
    }

    footer {
        padding: 30px 0;
        margin-top: 50px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 14px;
    }

    .glitch-text {
        font-size: 1.7rem;
    }

    .logo span {
        font-size: 0.95rem;
    }

    .nav-link {
        font-size: 0.85rem;
        padding: 5px 8px;
    }

    /* Prevent header items from overflowing on very small phones */
    .header-content {
        gap: 8px;
    }

    .back-link span {
        display: none; /* show only the arrow icon on tiny screens */
    }
}