:root {
    --bg-app: #0f1012;
    --bg-card: #1b1d21;
    --accent-color: #6366f1;
}

body {
    background-color: var(--bg-app);
    color: #e0e0e0;
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
    padding: 15px;
}

.main-card {
    background-color: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

/* КОНТЕЙНЕРЫ ДЛЯ КАНВАСОВ */
.canvas-bg-container {
    border-radius: 10px;
    border: 2px solid #333;
    overflow: auto;
    position: relative;
    background-position: center;
    background-repeat: repeat;
    transition: background-color 0.2s, background-image 0.2s;
    
    /* FIX: Чтобы спрайтлист всегда начинался сверху */
    display: block; 
    text-align: center;
    padding: 20px;
}

.canvas-main-wrapper { 
    min-height: 550px; 
    max-height: 80vh; 
}

.canvas-test-wrapper { 
    min-height: 130px; 
    width: 100%; 
    display: block; 
    overflow-x: auto; 
    text-align: left; 
    padding: 25px; 
}

/* ШАХМАТКА */
.bg-chess-dark:not([style*="background"]) {
    background-color: #111;
    background-image: 
        linear-gradient(45deg, #222 25%, transparent 25%), 
        linear-gradient(-45deg, #222 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #222 75%), 
        linear-gradient(-45deg, transparent 75%, #222 75%);
    background-size: 20px 20px;
}

#previewCanvas {
    box-shadow: 0 0 40px rgba(0,0,0,0.5);
    display: inline-block; /* Для работы text-align: center */
}

#testCanvas { 
    max-width: none !important; 
    width: auto !important; 
    height: auto !important; 
    display: inline-block;
}

/* КНОПКИ И ИНПУТЫ */
.btn-neon { 
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%); 
    border: none; 
    color: white; 
    font-weight: 700; 
    transition: 0.3s ease;
}
.btn-neon:hover {
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.6);
    transform: translateY(-1px);
    color: white;
}

.form-control-dark { 
    background: #25282e; 
    border: 1px solid #3a3f4b; 
    color: #fff; 
}
.form-control-dark:focus { 
    background: #2a2e35; 
    border-color: var(--accent-color); 
    color: white; 
    box-shadow: none; 
}

.code-block { 
    background: #000; 
    padding: 12px; 
    border-radius: 0 0 8px 8px; 
    font-family: 'Fira Code', monospace; 
    color: #10b981; 
    font-size: 0.75rem; 
    max-height: 180px; 
    overflow-y: auto; 
    border-top: 1px solid #222;
}

.section-title { 
    font-size: 0.72rem; 
    text-transform: uppercase; 
    color: #666; 
    font-weight: 800; 
    margin-top: 20px; 
    border-bottom: 1px solid #2d2f34; 
    padding-bottom: 5px; 
    margin-bottom: 12px; 
    letter-spacing: 0.5px;
}

.nav-tabs .nav-link { color: #888; border: none; font-weight: 600; }
.nav-tabs .nav-link.active { background: transparent; color: #fff; border-bottom: 2px solid var(--accent-color); }