:root {
    --bg-black: #030005;
    --dark-purple: #13001c;
    --deep-mauve: #24001b;
    --accent-dark: #4a0033;
    --accent-hover: #6b004a; 
    --text-main: #d3c4d1;
    --text-bright: #ffffff;
    --discord-blue: #5865F2;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Courier New', Courier, monospace; }

body {
    background-color: var(--bg-black);
    color: var(--text-main);
    overflow-x: hidden;
}

/* Background Animation */
.gradient-bg {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: linear-gradient(45deg, var(--bg-black), var(--dark-purple), var(--deep-mauve), var(--bg-black));
    background-size: 300% 300%;
    animation: gradientShift 20s ease infinite;
    z-index: -2;
}
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

#particle-canvas {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: -1;
    pointer-events: none;
}

/* Navigation */
nav {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 40px; background: rgba(3, 0, 5, 0.9);
    backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 100;
    border-bottom: 1px solid var(--accent-dark);
}

.logo-link { display: flex; align-items: center; gap: 15px; text-decoration: none; }

/* Circular Logo styling - Object Fit Contain ensures ZZZ and tail show */
.nav-logo {
    width: 50px; height: 50px; border-radius: 50%;
    object-fit: contain; background-color: #000;
    border: 2px solid var(--text-main);
}

.logo h1 { color: var(--text-bright); letter-spacing: 2px; font-weight: 900; font-size: 1.4rem; }

/* Discord & Hamburger Container */
.nav-right-actions { display: flex; align-items: center; gap: 15px; order: 3; }

.discord-btn {
    background: var(--discord-blue); color: white; text-decoration: none;
    padding: 8px 16px; border-radius: 5px; font-weight: bold; font-size: 14px;
    display: flex; align-items: center; gap: 8px; transition: 0.3s;
}
.discord-btn:hover { background: #4752c4; transform: translateY(-2px); }

/* Navigation Links */
.nav-links { display: flex; align-items: center; order: 2; margin-left: auto; margin-right: 25px; }
.nav-links a {
    color: var(--text-main); text-decoration: none;
    margin-left: 20px; font-weight: bold; transition: 0.3s;
}
.nav-links a:hover { color: var(--text-bright); }

.mobile-menu { display: none; background: none; border: none; color: var(--text-main); font-size: 24px; cursor: pointer; }

/* Main Content Layout */
main { padding: 40px 20px; max-width: 1200px; margin: 0 auto; min-height: 80vh; }
h2 { margin-bottom: 20px; color: var(--text-bright); font-size: 2rem; border-bottom: 2px solid var(--accent-dark); display: inline-block; padding-bottom: 5px; }

/* Catalog Grids */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-top: 20px; }
.media-item iframe { width: 100%; border-radius: 8px; border: 1px solid var(--accent-dark); background: #000; }

/* Form Elements */
.form-container { background: rgba(19, 0, 28, 0.7); padding: 30px; border-radius: 10px; border: 1px solid var(--accent-dark); }
.artist-group { background: rgba(0, 0, 0, 0.4); padding: 15px; margin-bottom: 15px; border-left: 4px solid var(--accent-dark); border-radius: 4px; }
input, textarea {
    width: 100%; padding: 12px; margin: 10px 0;
    background: rgba(0, 0, 0, 0.5); border: 1px solid var(--accent-dark); color: #fff; border-radius: 4px;
}
button {
    background: var(--accent-dark); color: white; border: none;
    padding: 12px 24px; cursor: pointer; font-weight: bold; border-radius: 4px; transition: 0.3s;
}
button:hover { background: var(--accent-hover); }
.btn-secondary { background: #1a1a1a; border: 1px solid #333; margin-bottom: 15px; }

/* Mobile View adjustments */
@media (max-width: 768px) {
    nav { padding: 10px 20px; }
    .nav-links {
        position: absolute; top: 70px; left: 0; width: 100%;
        background: rgba(3, 0, 5, 0.98); flex-direction: column;
        display: none; padding: 20px 0; border-bottom: 1px solid var(--accent-dark);
    }
    .nav-links.active { display: flex; }
    .nav-links a { margin: 15px 0; font-size: 1.2rem; }
    .mobile-menu { display: block; }
    .discord-btn span { display: none; } /* Hide text, keep icon only on small screens */
    .logo h1 { font-size: 1.1rem; }
}