/* octapad-left.css */

.panel-section.left { width: 30%; padding: 8px; border-right: 1px solid #333; display: flex; flex-direction: column; background: #151515; }
.brand-area { text-align: center; margin-bottom: 8px; font-family: 'Segoe UI', sans-serif; font-weight: 900; font-size: 1.1em; text-transform: uppercase; letter-spacing: 1px; padding-bottom: 5px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.brand-piano { color: var(--accent-color); text-shadow: 0 0 8px rgba(255, 51, 102, 0.6); }
.brand-mitra { color: var(--brand-blue); text-shadow: 0 0 8px rgba(0, 191, 255, 0.6); margin-left: 3px; }

/* FIX: Ensure consistent 2x2 grid layout for mode selectors */
.controls-container.grid-2x2 { 
    display: grid; 
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    grid-template-rows: 1fr 1fr;   /* Two equal rows for the 4 slots */
    gap: 6px; 
    width: 100%; 
    height: 100%; 
    align-content: stretch; 
}

/* FIX: Ensure buttons stretch to fill the height allocated by the grid row */
.controls-container.grid-2x2 .control-btn {
    height: 100%; 
    min-height: 30px; /* Ensure a minimum size */
    width: 100%;
}

/* Fullscreen button spans both columns */
#fullscreen-btn { grid-column: span 2; }


.control-btn { background: #2a2a2a; color: #ccc; border: 1px solid #444; border-radius: 4px; padding: 0; font-size: 0.7em; font-weight: bold; cursor: pointer; width: 100%; display: flex; align-items: center; justify-content: center; transition: background 0.1s; }
.control-btn:active { background: #444; color: white; transform: translateY(1px); }
.learn-btn { color: #00bfff; }