/* ===================================
   Theme: Modern (Minimalista)
   =================================== */

:root {
    /* Colors */
    --primary-color: #3498db;
    --secondary-color: #2c3e50;
    --accent-color: #e74c3c;
    --success-color: #2ecc71;
    --warning-color: #f39c12;
    --bg-color: #ecf0f1;
    --card-bg: #ffffff;
    --text-color: #2c3e50;
    --text-secondary: #7f8c8d;
    --border-color: #bdc3c7;

    /* Shadows */
    --shadow: 0 2px 10px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.12);

    /* Piano Keys */
    --white-key: #ffffff;
    --white-key-pressed: #e8e8e8;
    --black-key: #2c3e50;
    --black-key-pressed: #1a252f;
    --key-border: #d0d0d0;
    --key-highlight: rgba(52, 152, 219, 0.3);
}

body {
    background: linear-gradient(135deg, #ecf0f1 0%, #d5dbdb 100%);
}

.app-header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

.mode-btn.active {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
}

.note-main {
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.control-btn.primary {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.2);
}

.control-btn.primary:hover {
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.3);
}