/* ACID GRAPHIC - Experimental Chaos */
body.style-acid {
    --bg-main: #0c001a;
    --text-primary: #00ff00;
    --electric-blue: #ff00ff;
    --btn-shadow: rgba(255, 0, 255, 0.4);
}

:root.light-mode body.style-acid {
    --bg-main: #ffccff;
    --text-primary: #1a0033;
    --electric-blue: #ff00ff;
}

body.style-acid .palette-dropdown,
body.style-acid .side-drawer {
    border: 3px solid var(--text-primary);
    border-radius: 0;
    transform: rotate(1deg);
    font-family: 'Georgia', serif;
}

body.style-acid .hero-title {
    font-family: 'Georgia', serif;
    font-style: italic;
    font-size: 11vw;
    line-height: 0.9;
    transform: rotate(-6deg) translateX(-2vw);
    mix-blend-mode: normal;
    text-shadow: 4px 4px 0px #ff00ff;
}

body.style-acid .hero-subtitle {
    transform: rotate(3deg) translateY(2vh);
    font-family: serif;
    font-size: 1.8rem;
    color: #000;
    background: #00ff00;
    padding: 0.5rem 1rem;
    display: inline-block;
    max-width: 600px;
}

body.style-acid .shape {
    width: 70vw;
    height: 70vw;
    background: radial-gradient(circle, var(--electric-blue), transparent 70%) !important;
    opacity: 0.25;
    pointer-events: none;
    position: fixed;
    border-radius: 50%;
    filter: blur(140px);
    mix-blend-mode: screen;
}

body.style-acid .shape-1 {
    top: -20%;
    left: -20%;
    background: radial-gradient(circle, #00ff00, transparent 70%) !important;
    animation: acidFloat1 28s infinite ease-in-out;
}

body.style-acid .shape-2 {
    bottom: -20%;
    right: -20%;
    background: radial-gradient(circle, #ff00ff, transparent 70%) !important;
    animation: acidFloat2 38s infinite ease-in-out;
}

body.style-acid .shape-3 {
    top: 30%;
    left: 20%;
    width: 50vw;
    height: 50vw;
    background: radial-gradient(circle, #00ffff, transparent 70%) !important;
    animation: acidFloat3 48s infinite ease-in-out;
}

body.style-acid .side-drawer {
    border-left: 5px solid #00ff00;
    color: #00ff00;
}

body.style-acid .style-option {
    border-color: #ff00ff;
}

body.style-acid .style-option.active {
    background: #ff00ff;
    color: #1a0033;
}

@keyframes acidFloat1 {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(40vw, 15vh) rotate(30deg) scale(1.2); }
    66% { transform: translate(-5vw, 45vh) rotate(-20deg) scale(0.9); }
    100% { transform: translate(0, 0) scale(1); }
}

@keyframes acidFloat2 {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-45vw, -35vh) rotate(-40deg) scale(1.4); }
    100% { transform: translate(0, 0) scale(1); }
}

@keyframes acidFloat3 {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(25vw, -25vh) rotate(60deg) scale(1.6); }
    100% { transform: translate(0, 0) scale(1); }
}

body.style-acid .add-btn {
    border-radius: 2px;
    transform: rotate(-3deg);
    background: #00ff00;
    color: #000;
    box-shadow: 4px 4px 0px #ff00ff;
}

body.style-acid .add-btn:hover {
    transform: rotate(3deg) scale(1.1);
    background: #ff00ff;
    color: #00ff00;
    box-shadow: -4px -4px 0px #00ff00;
}