/* =================================================================== */
/* ==== FINAL & MODERN CSS FOR MESH GENERATOR (mesh-generator.css) ==== */
/* =================================================================== */

/* ============== 2. ANIMATED BACKGROUND & SHARED STYLES ============== */
.background-animation { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: -1; 
    background: radial-gradient(ellipse at 70% 20%, var(--primary-color) 0%, transparent 40%), 
                radial-gradient(ellipse at 30% 80%, var(--secondary-color) 0%, transparent 40%); 
    filter: blur(100px); 
    opacity: 0.3; 
    animation: moveAurora 20s infinite alternate; 
}

@keyframes moveAurora { 
    from { transform: translate(-20%, -20%) scale(1.2); } 
    to { transform: translate(20%, 20%) scale(1.5); } 
}

/* ============== 3. TOOL HEADER & LAYOUT ============== */
.tool-header { 
    text-align: center; 
    margin-bottom: 2rem; 
    border-bottom: 1px solid var(--border-color); 
    padding-bottom: 1.5rem; 
}
.tool-header h1 { font-size: 2.5rem; }
.tool-header p { color: var(--text-muted); }

.mesh-workspace {
    display: grid;
    grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: flex-start;
}

/* ============== 4. MESH CANVAS STYLING (THE FIX) ============== */
#mesh-canvas-container {
    width: 100%;
    padding-top: 60%;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.mesh-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid var(--border-color);
    cursor: crosshair;
    background: #0d1222;
    transition: background-image 0.2s ease-in-out;
}

/* Draggable Color Points */
.color-point {
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 3px solid white;
    cursor: grab;
    box-shadow: 0 5px 15px rgba(0,0,0,0.4);
    transition: transform 0.2s ease, background-color 0.2s ease;
}
.color-point:hover { transform: scale(1.2); }
.color-point:active { cursor: grabbing; transform: scale(1.1); }

/* ============== 5. CONTROLS PANEL STYLING (THE SALIQA) ============== */
.mesh-controls {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mesh-controls .control-group {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    border-radius: 15px;
}

.mesh-controls h3 { 
    font-size: 1.2rem; 
    margin-bottom: 0.5rem; 
}

.mesh-controls .control-description { 
    font-size: 0.9rem; 
    color: var(--text-muted); 
    margin-bottom: 1rem; 
}

.no-points-placeholder { 
    color: var(--text-muted); 
    text-align: center; 
    padding: 1rem; 
}

#color-points-list { 
    display: flex; 
    flex-direction: column; 
    gap: 0.75rem; 
}

.point-control { 
    display: flex; 
    align-items: center; 
    gap: 0.75rem; 
}

.point-control-color { 
    width: 30px; 
    height: 30px; 
    border-radius: 50%; 
    border: none; 
    cursor: pointer; 
    padding: 0; 
}

.point-control-hex { 
    flex-grow: 1; 
    font-family: monospace; 
    font-size: 0.9rem; 
}

.point-control-remove { 
    background: none; 
    border: none; 
    color: var(--text-muted); 
    font-size: 1.5rem; 
    cursor: pointer; 
    transition: color 0.2s; 
    padding: 0; 
    line-height: 1; 
}

.point-control-remove:hover { 
    color: #ef4444; 
}

.randomizer-control { 
    display: flex; 
    align-items: center; 
    gap: 0.75rem; 
}

.randomizer-control label { 
    font-size: 0.9rem; 
    color: var(--text-muted); 
}

.randomizer-control input[type="number"] { 
    font-family: 'Poppins', sans-serif; 
    width: 60px; 
    background: var(--input-bg); 
    border: 1px solid var(--border-color); 
    border-radius: 8px; 
    color: var(--text-color); 
    padding: 8px; 
    font-size: 0.9rem; 
    text-align: center; 
}

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

.switch { 
    position: relative; 
    display: inline-block; 
    width: 50px; 
    height: 28px; 
}

.switch input { 
    opacity: 0; 
    width: 0; 
    height: 0; 
}

.slider { 
    position: absolute; 
    cursor: pointer; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: rgba(0,0,0,0.3); 
    transition: .4s; 
    border-radius: 28px; 
}

.slider:before { 
    position: absolute; 
    content: ""; 
    height: 20px; 
    width: 20px; 
    left: 4px; 
    bottom: 4px; 
    background-color: white; 
    transition: .4s; 
    border-radius: 50%; 
}

input:checked + .slider { 
    background-color: var(--primary-color); 
}

input:checked + .slider:before { 
    transform: translateX(22px); 
}

.code-output textarea { 
    font-family: monospace; 
    width: 100%; 
    height: 120px; 
    background: var(--input-bg); 
    border: 1px solid var(--border-color); 
    border-radius: 8px; 
    color: var(--text-muted); 
    padding: 1rem; 
    resize: vertical; 
    margin-top: 1rem; 
    margin-bottom: 0.5rem; 
}

/* ============== 6. SEO GUIDE ============== */
.content-guide { }

/* ============== 7. RESPONSIVE DESIGN ============== */
@media (max-width: 1024px) {
    .mesh-workspace {
        grid-template-columns: 1fr;
    }
}