/* Song CSS - Grid styles, timeline, accordion for song sections */
/* ==================== Step Timeline ==================== */
.step-timeline {
    background: var(--bg-primary);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
}

.step-timeline h3 {
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.step-timeline h3 i {
    color: var(--accent-color);
}

.timeline-container {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) var(--bg-secondary);
}

.timeline-container::-webkit-scrollbar {
    height: 6px;
}

.timeline-container::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 3px;
}

.timeline-container::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 3px;
}

/* Mobile: Touch-friendly timeline */
@media (max-width: 767px) {
    .step-timeline {
        padding: 0.75rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .timeline-container {
        gap: 0.35rem;
    }
    
    .timeline-section {
        min-width: 100px;
        flex-shrink: 0;
    }
    
    .timeline-steps {
        grid-template-columns: repeat(4, minmax(32px, 1fr));
        gap: 3px;
        padding: 0.35rem;
    }
    
    .timeline-step {
        min-height: 32px;
        min-width: 32px;
    }
    
    .timeline-label {
        font-size: 0.8rem;
    }
}

/* Tablet and up */
@media (min-width: 768px) {
    .timeline-section {
        min-width: 140px;
    }
    
    .timeline-steps {
        grid-template-columns: repeat(4, 1fr);
        gap: 3px;
    }
}

.timeline-section {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 140px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.timeline-section:hover {
    transform: translateY(-2px);
}

.timeline-section.active {
    order: -1;
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border-radius: 8px 8px 0 0;
    border: 1px solid var(--border-color);
    border-bottom: none;
}

.timeline-section.expanded .timeline-header {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

.timeline-section.collapsed .timeline-header {
    border-radius: 8px;
}

.timeline-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.timeline-section.expanded .timeline-label {
    color: white;
}

.timeline-toggle {
    width: 24px;
    height: 24px;
    background: var(--bg-primary);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.timeline-section.expanded .timeline-toggle {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.timeline-toggle:hover {
    background: var(--accent-color);
    color: white;
}

.timeline-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
    padding: 0.5rem;
    background: var(--bg-secondary);
    border-radius: 0 0 8px 8px;
    border: 1px solid var(--border-color);
    border-top: none;
}

.timeline-section.collapsed .timeline-steps {
    display: none;
}

.timeline-step {
    aspect-ratio: 1;
    background: var(--bg-primary);
    border-radius: 4px;
    border: 1px solid var(--border-color);
    transition: all 0.15s;
}

.timeline-step:hover {
    border-color: var(--accent-color);
    transform: scale(1.1);
}

.timeline-step.active {
    background: linear-gradient(135deg, var(--accent-color) 0%, #ec4899 100%);
    border-color: var(--accent-color);
    box-shadow: 0 0 8px rgba(244, 114, 182, 0.5);
}

.timeline-step.playing {
    animation: pulse 0.3s ease-out;
}

.timeline-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.25rem;
}

.timeline-connector svg {
    width: 20px;
    height: 20px;
    color: var(--border-color);
}

.timeline-section.expanded .timeline-connector svg {
    color: var(--accent-color);
}

.timeline-description {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: center;
    padding: 0.25rem 0.5rem;
    background: var(--bg-secondary);
    border-radius: 4px;
    margin-top: 0.25rem;
}

.timeline-section.expanded .timeline-description {
    background: rgba(244, 114, 182, 0.1);
    color: var(--accent-color);
}

/* ==================== Section Timeline ==================== */
.section-timeline {
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--bg-primary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    width: 100%;
    max-width: 100vw;
}

/* Mobile: Compact section timeline */
@media (max-width: 767px) {
    .section-timeline {
        padding: 0.75rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .section-timeline .group-grid-row {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
        margin-bottom: 0.5rem;
        min-width: max-content;
    }
    
    .group-grid-label {
        min-width: 70px;
        padding-right: 0.75rem;
    }
    
    .group-grid-label .group-name {
        font-size: 0.85rem;
    }
    
    .group-grid-label .group-range {
        font-size: 0.75rem;
    }
    
    .group-grid-steps {
        display: grid;
        grid-template-columns: repeat(8, minmax(36px, 1fr));
        gap: 3px;
    }
    
    .group-step {
        min-width: 32px;
        height: 24px;
    }
}

/* Tablet and up */
@media (min-width: 768px) {
    .section-timeline .group-grid-row {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        margin-bottom: 0.5rem;
    }
    
    .group-grid-steps {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
}

.section-timeline .group-grid-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.section-timeline .group-grid-row:last-child {
    margin-bottom: 0;
}

.section-timeline .group-grid-row:hover {
    border-color: var(--accent-color);
    transform: translateX(4px);
}

.section-timeline .group-grid-row.active {
    background: linear-gradient(135deg, rgba(244, 114, 182, 0.15) 0%, rgba(236, 72, 153, 0.15) 100%);
    border-color: var(--accent-color);
    box-shadow: 0 4px 12px rgba(244, 114, 182, 0.3);
}

.group-grid-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 100px;
    padding-right: 1rem;
    border-right: 2px solid var(--border-color);
}

.group-grid-label .group-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.group-grid-label .group-range {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.section-timeline .group-grid-row.active .group-grid-label .group-name {
    color: var(--accent-color);
}

.group-grid-steps {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 4px;
    flex: 1;
    max-width: 100%;
}

.group-step {
    min-width: 12px;
    height: 28px;
    background: var(--bg-primary);
    border-radius: 6px;
    border: 2px solid var(--border-color);
    cursor: default;
    transition: all 0.15s;
    width: 100%;
}

/* No hover effect - cells are purely for display */

.group-step.active {
    background: linear-gradient(135deg, var(--accent-color) 0%, #ec4899 100%);
    border-color: var(--accent-color);
    box-shadow: 0 0 12px rgba(244, 114, 182, 0.6);
}

.group-step.playing {
    animation: pulse 0.3s ease-out;
    background: #34d399;
    border-color: #34d399;
}

/* ==================== Step Groups Horizontal Accordion ==================== */
.step-groups-accordion {
    background: var(--bg-primary);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 2px solid var(--border-color);
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.accordion-header h3 {
    margin: 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.accordion-header h3 i {
    color: var(--accent-color);
}

.accordion-controls {
    display: flex;
    gap: 0.5rem;
}

.accordion-controls .btn {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
}

.accordion-container {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.accordion-group {
    flex: 0 0 auto;
    min-width: 180px;
    max-width: 280px;
    background: var(--bg-secondary);
    border-radius: 10px;
    border: 2px solid var(--border-color);
    overflow: hidden;
    transition: all 0.3s ease;
}

.accordion-group.active {
    border-color: var(--accent-color);
    box-shadow: 0 0 12px rgba(244, 114, 182, 0.3);
}

.accordion-group.expanded {
    max-width: 400px;
}

.accordion-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    cursor: pointer;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s ease;
}

.accordion-group-header:hover {
    background: var(--bg-hover);
}

.accordion-group.active .accordion-group-header {
    background: var(--accent-color);
    color: white;
}

.group-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.group-name {
    font-weight: 600;
    font-size: 0.9rem;
}

.group-range {
    font-size: 0.75rem;
    opacity: 0.7;
}

.group-activity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.activity-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-color);
    transition: background 0.2s ease;
}

.accordion-group.has-activity .activity-indicator {
    background: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

.expand-icon {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.accordion-group.expanded .expand-icon {
    transform: rotate(180deg);
}

.accordion-group-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.accordion-group.expanded .accordion-group-content {
    max-height: 200px;
}

.group-details {
    padding: 0.75rem;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.5rem;
    background: var(--bg-primary);
    border-radius: 6px;
    margin-bottom: 0.4rem;
    font-size: 0.8rem;
}

.detail-row:last-child {
    margin-bottom: 0;
}

.detail-label {
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.detail-value {
    font-weight: 600;
    color: var(--accent-color);
}

/* ==================== Melody Group Rows ==================== */
.melody-group-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    max-width: 100vw;
}

.melody-group-row:hover {
    border-color: var(--accent-color);
}

.melody-group-row.active {
    background: linear-gradient(135deg, rgba(244, 114, 182, 0.15) 0%, rgba(236, 72, 153, 0.15) 100%);
    border-color: var(--accent-color);
    box-shadow: 0 2px 8px rgba(244, 114, 182, 0.3);
}

.melody-group-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-width: 60px;
}

/* Bass Group Header */
.bass-group-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-width: 60px;
}

/* Lead Group Header */
.lead-group-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-width: 60px;
}

/* Bass and Lead group labels */
.bass-group-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-align: center;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lead-group-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-align: center;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bass-group-row.active .bass-group-label {
    color: #a78bfa;
}

.lead-group-row.active .lead-group-label {
    color: #34d399;
}

.melody-group-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-align: center;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}

.melody-group-row.active .melody-group-label {
    color: var(--accent-color);
}

/* Melody grid columns */
.melody-group-row .strings-grid {
    display: flex;
    flex: 1;
    gap: 4px;
}

.melody-group-row > .string-column {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ==================== Melody Grid ==================== */
/* ==================== Melody Grid ==================== */
.strings-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) var(--bg-primary);
    width: 100%;
    max-width: 100vw;
}

/* ==================== Melody Grid Mobile ==================== */
/* Mobile: Horizontal scroll with improved touch targets */
@media (max-width: 767px) {
    .strings-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
    }
    
    .melody-group-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0.75rem;
        gap: 0.5rem;
        min-width: max-content;
    }
    
    .melody-group-header {
        min-width: 60px;
        flex-shrink: 0;
    }
    
    .melody-group-row .strings-grid {
        display: flex;
        flex-direction: row;
        gap: 4px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .melody-group-row > .string-column {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 2px;
        min-width: 48px;
        flex-shrink: 0;
    }
    
    .string-cell {
        min-height: 48px;
        min-width: 48px;
        height: 48px;
        width: 48px;
        flex: none;
    }
}

/* ==================== Bass Grid Mobile ==================== */
@media (max-width: 767px) {
    .bass-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .bass-group-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0.75rem;
        gap: 0.5rem;
        min-width: max-content;
    }
    
    .bass-group-label {
        min-width: 70px;
        max-width: 70px;
        flex-shrink: 0;
    }
    
    .bass-columns-wrapper {
        display: flex;
        flex-direction: row;
        gap: 4px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .bass-column {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 2px;
        min-width: 48px;
        flex-shrink: 0;
    }
    
    .bass-cell {
        min-height: 48px;
        min-width: 48px;
        height: 48px;
        width: 48px;
    }
}

/* ==================== Lead Grid Mobile ==================== */
@media (max-width: 767px) {
    .lead-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .lead-group-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0.75rem;
        gap: 0.5rem;
        min-width: max-content;
    }
    
    .lead-group-label {
        min-width: 70px;
        max-width: 70px;
        flex-shrink: 0;
    }
    
    .lead-columns-wrapper {
        display: flex;
        flex-direction: row;
        gap: 4px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .lead-column {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 2px;
        min-width: 48px;
        flex-shrink: 0;
    }
    
    .lead-cell {
        min-height: 48px;
        min-width: 48px;
        height: 48px;
        width: 48px;
    }
}

/* ==================== Rhythm Grid Mobile ==================== */
@media (max-width: 767px) {
    .rhythm-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .rhythm-group-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0.75rem;
        gap: 0.5rem;
        min-width: max-content;
    }
    
    .rhythm-group-label {
        min-width: 70px;
        flex-shrink: 0;
    }
    
    .rhythm-group-row .rhythm-cell {
        min-height: 48px;
        min-width: 48px;
        height: 48px;
        width: 48px;
    }
}

/* Tablet and up: Linear layout */
@media (min-width: 768px) {
    .string-row {
        grid-template-columns: repeat(16, minmax(0, 1fr));
        gap: 4px;
    }
    
    .string-row[data-steps="32"] {
        grid-template-columns: repeat(32, minmax(0, 1fr));
    }
    
    .string-row[data-steps="64"] {
        grid-template-columns: repeat(64, minmax(0, 1fr));
    }
}

.strings-grid::-webkit-scrollbar {
    height: 8px;
}

.strings-grid::-webkit-scrollbar-track {
    background: var(--bg-primary);
    border-radius: 4px;
}

.strings-grid::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 4px;
}

.string-row {
    display: grid;
    grid-template-columns: repeat(16, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
}

.string-row[data-steps="32"] {
    grid-template-columns: repeat(32, minmax(0, 1fr));
}

.string-row[data-steps="64"] {
    grid-template-columns: repeat(64, minmax(0, 1fr));
}

.string-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0;
    height: 180px;
    flex: 1;
    min-width: 0;
}

.string-cell {
    flex: 1;
    min-height: 18px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.string-cell:hover {
    border-color: var(--accent-color);
}

.string-cell.active {
    background: linear-gradient(135deg, var(--accent-color) 0%, #ec4899 100%);
    border-color: var(--accent-color);
    box-shadow: 0 0 15px rgba(244, 114, 182, 0.5);
}

/* ==================== Bass Grid ==================== */
.bass-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) var(--bg-primary);
    width: 100%;
    max-width: 100vw;
}

.bass-grid::-webkit-scrollbar {
    height: 8px;
}

.bass-grid::-webkit-scrollbar-track {
    background: var(--bg-primary);
    border-radius: 4px;
}

.bass-grid::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 4px;
}

/* Mobile: Horizontal scroll with row layout */
@media (max-width: 767px) {
    .bass-grid {
        -webkit-overflow-scrolling: touch;
    }
    
    .bass-group-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0.5rem 0.75rem;
        gap: 0.5rem;
    }
    
    .bass-group-label {
        min-width: 60px;
        max-width: 60px;
        font-size: 0.8rem;
        flex-shrink: 0;
    }
    
    .bass-columns-wrapper {
        display: flex;
        flex-direction: row;
        gap: 4px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.25rem;
    }
    
    .bass-column {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 2px;
        height: auto;
        min-width: 44px;
        flex-shrink: 0;
    }
    
    .bass-cell {
        min-height: 44px;
        min-width: 44px;
        flex: none;
        height: 44px;
    }
}

/* Tablet and up */
@media (min-width: 768px) {
    .bass-column {
        height: 180px;
    }
}

.bass-group-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    max-width: 100vw;
}

.bass-group-row.active {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
    border-color: #a78bfa;
    box-shadow: 0 2px 8px rgba(167, 139, 250, 0.3);
}

.bass-group-label {
    min-width: 80px;
    max-width: 80px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-align: right;
    flex-shrink: 0;
}

.bass-group-row.active .bass-group-label {
    color: #a78bfa;
}

.bass-columns-wrapper {
    display: flex;
    flex: 1;
    gap: 4px;
    min-width: 0;
}

.bass-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0;
    flex: 1;
    min-width: 0;
    height: 180px;
}

.bass-cell {
    flex: 1;
    min-height: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.bass-group-row:hover {
    border-color: #a78bfa;
}

.bass-cell:hover {
    border-color: #a78bfa;
}

.bass-cell.active {
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
    border-color: #a78bfa;
    box-shadow: 0 0 15px rgba(167, 139, 250, 0.5);
}

/* ==================== Lead Grid ==================== */
.lead-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) var(--bg-primary);
    width: 100%;
    max-width: 100vw;
}

.lead-grid::-webkit-scrollbar {
    height: 8px;
}

.lead-grid::-webkit-scrollbar-track {
    background: var(--bg-primary);
    border-radius: 4px;
}

.lead-grid::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 4px;
}

/* Mobile: Horizontal scroll with row layout */
@media (max-width: 767px) {
    .lead-grid {
        -webkit-overflow-scrolling: touch;
    }
    
    .lead-group-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0.5rem 0.75rem;
        gap: 0.5rem;
    }
    
    .lead-group-label {
        min-width: 60px;
        max-width: 60px;
        font-size: 0.8rem;
        flex-shrink: 0;
    }
    
    .lead-columns-wrapper {
        display: flex;
        flex-direction: row;
        gap: 4px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.25rem;
    }
    
    .lead-column {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 2px;
        height: auto;
        min-width: 44px;
        flex-shrink: 0;
    }
    
    .lead-cell {
        min-height: 44px;
        min-width: 44px;
        flex: none;
        height: 44px;
    }
}

/* Tablet and up */
@media (min-width: 768px) {
    .lead-column {
        height: 180px;
    }
}

.lead-group-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    max-width: 100vw;
}

.lead-group-row.active {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.15) 0%, rgba(16, 185, 129, 0.15) 100%);
    border-color: #34d399;
    box-shadow: 0 2px 8px rgba(52, 211, 153, 0.3);
}

.lead-group-label {
    min-width: 80px;
    max-width: 80px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-align: right;
    flex-shrink: 0;
}

.lead-group-row.active .lead-group-label {
    color: #34d399;
}

.lead-columns-wrapper {
    display: flex;
    flex: 1;
    gap: 4px;
    min-width: 0;
}

.lead-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0;
    flex: 1;
    min-width: 0;
    height: 180px;
}

.lead-cell {
    flex: 1;
    min-height: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.lead-group-row:hover {
    border-color: #34d399;
}

.lead-cell:hover {
    border-color: #34d399;
}

.lead-cell.active {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    border-color: #34d399;
    box-shadow: 0 0 15px rgba(52, 211, 153, 0.5);
}

/* ==================== Rhythm Grid ==================== */
.rhythm-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) var(--bg-primary);
    width: 100%;
    max-width: 100vw;
}

.rhythm-grid::-webkit-scrollbar {
    height: 8px;
}

.rhythm-grid::-webkit-scrollbar-track {
    background: var(--bg-primary);
    border-radius: 4px;
}

.rhythm-grid::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 4px;
}

/* Mobile: Compact rhythm grid with grouped cells */
@media (max-width: 767px) {
    .rhythm-grid {
        -webkit-overflow-scrolling: touch;
    }
    
    .rhythm-group-row {
        display: grid;
        grid-template-columns: 70px repeat(4, minmax(44px, 1fr));
        gap: 6px;
        align-items: center;
        min-width: max-content;
        width: 100%;
        padding: 0.5rem;
        background: var(--bg-secondary);
        border-radius: 8px;
    }
    
    /* Show 4 groups of 4 on mobile instead of 16 linear */
    .rhythm-group-row[data-steps="16"] {
        grid-template-columns: 70px repeat(4, minmax(44px, 1fr));
    }
    
    .rhythm-group-row[data-steps="32"] {
        grid-template-columns: 70px repeat(8, minmax(44px, 1fr));
    }
    
    .rhythm-group-row[data-steps="64"] {
        grid-template-columns: 70px repeat(16, minmax(36px, 1fr));
    }
    
    .rhythm-cell {
        height: 44px;
        min-width: 44px;
    }
    
    .rhythm-group-label {
        min-width: 60px;
        font-size: 0.8rem;
    }
}

/* Tablet and up: Linear layout */
@media (min-width: 768px) {
    .rhythm-row {
        grid-template-columns: 90px repeat(16, minmax(0, 1fr));
        gap: 4px;
        align-items: center;
        min-width: max-content;
        width: 100%;
    }
    
    .rhythm-row[data-steps="32"] {
        grid-template-columns: 90px repeat(32, minmax(0, 1fr));
    }
    
    .rhythm-row[data-steps="64"] {
        grid-template-columns: 90px repeat(64, minmax(0, 1fr));
    }
    
    .rhythm-cell {
        height: 28px;
    }
}

.rhythm-group-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    max-width: 100vw;
}

.rhythm-group-row:hover {
    border-color: #ff9ff3;
}

.rhythm-group-row.active {
    background: linear-gradient(135deg, rgba(255, 159, 243, 0.15) 0%, rgba(244, 114, 182, 0.15) 100%);
    border-color: #ff9ff3;
    box-shadow: 0 2px 8px rgba(255, 159, 243, 0.3);
}

.rhythm-group-label {
    min-width: 80px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-align: right;
    display: flex;
    flex-direction: column;
}

.rhythm-group-row.active .rhythm-group-label {
    color: #ff9ff3;
}

.rhythm-label {
    font-weight: 500;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rhythm-cell {
    height: 28px;
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    width: 100%;
}

.rhythm-cell:hover {
    border-color: var(--accent-color);
}

.rhythm-cell.active {
    background: linear-gradient(135deg, #ff9ff3 0%, #f472b6 100%);
    border-color: #ff9ff3;
}

.rhythm-cell.playing {
    animation: pulse 0.3s ease-out;
}

/* ==================== Harmonics Grid ==================== */
.harmonics-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.75rem;
    margin-top: 1rem;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

.harmonic-cell {
    aspect-ratio: 1;
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: bold;
    min-width: 0;
    flex: 1;
}

.harmonic-cell:hover {
    border-color: var(--accent-color);
    transform: scale(1.05);
}

.harmonic-cell.active {
    background: linear-gradient(135deg, var(--accent-color) 0%, #ec4899 100%);
    border-color: var(--accent-color);
    color: white;
    box-shadow: 0 0 15px rgba(244, 114, 182, 0.5);
}

/* ==================== Form Select Style ==================== */
.form-select {
    width: 140px;
    padding: 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.9rem;
}

.form-select:hover {
    border-color: var(--accent-color);
}

.form-select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(244, 114, 182, 0.2);
}

/* Smaller variant for narrow selects */
.form-select-small {
    width: 100px;
    padding: 0.4rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.85rem;
}

/* ==================== Pulse Animation ==================== */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* ==================== Responsive Accordion ==================== */
@media (max-width: 640px) {
    .accordion-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .accordion-group {
        min-width: 140px;
        max-width: 200px;
    }
    
    .accordion-group.expanded {
        max-width: 280px;
    }
}

/* ==================== Group Visual Steps ==================== */
.group-visual {
    display: flex;
    gap: 2px;
    padding: 0.5rem;
    background: var(--bg-primary);
    flex-wrap: wrap;
}

.visual-step {
    width: 12px;
    height: 20px;
    border-radius: 3px;
    background: var(--border-color);
    transition: all 0.2s ease;
}

.visual-step.active {
    background: var(--accent-color);
    box-shadow: 0 0 4px rgba(244, 114, 182, 0.5);
}

.visual-step.playing {
    background: #fbbf24;
    animation: pulse 0.2s ease;
}

/* ==================== Accordion Progress Bars ==================== */
.accordion-progress {
    display: flex;
    gap: 1px;
    padding: 0.5rem;
    background: var(--bg-primary);
}

.progress-segment {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--border-color);
    overflow: hidden;
    transition: all 0.2s ease;
}

.progress-segment.active {
    background: linear-gradient(90deg, var(--accent-color), #ec4899);
}

/* ==================== Automation Controls in Accordion ==================== */
.automation-controls {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
}

.automation-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.automation-row:last-child {
    margin-bottom: 0;
}

.automation-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 50px;
}

.automation-label i {
    font-size: 0.7rem;
}

.automation-row input[type="range"] {
    flex: 1;
    height: 6px;
    min-width: 60px;
}

.automation-value {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--accent-color);
    min-width: 32px;
    text-align: right;
}

/* ==================== Pan Controls in Accordion ==================== */
.pan-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.pan-row:last-child {
    margin-bottom: 0;
}

.pan-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 50px;
}

.pan-row input[type="range"] {
    flex: 1;
    height: 6px;
    min-width: 60px;
}

.pan-value {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--accent-color);
    min-width: 32px;
    text-align: right;
}

/* ==================== Effect Controls in Accordion ==================== */
.effect-controls {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
}

.effect-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.effect-row:last-child {
    margin-bottom: 0;
}

.effect-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 50px;
}

.effect-row input[type="range"] {
    flex: 1;
    height: 6px;
    min-width: 60px;
}

.effect-value {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--accent-color);
    min-width: 32px;
    text-align: right;
}

/* ==================== Automation Curves Grid ==================== */
.automation-curves-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.automation-curve-card {
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
    transition: all 0.3s ease;
}

.automation-curve-card:hover {
    border-color: var(--accent-color);
    box-shadow: var(--card-shadow);
}

.curve-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.curve-header h4 {
    margin: 0;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.curve-header h4 i {
    color: var(--accent-color);
}

.curve-instrument-select {
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8rem;
    cursor: pointer;
}

.curve-canvas-container {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 0.5rem;
    margin-bottom: 0.75rem;
    overflow-x: auto;
}

.curve-canvas-container canvas {
    width: 100%;
    height: 80px;
    border-radius: 4px;
    cursor: crosshair;
}

.curve-controls {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.curve-controls .btn {
    padding: 0.4rem 0.75rem;
    font-size: 0.75rem;
}

.curve-presets {
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
}

.curve-presets h4 {
    margin: 0 0 0.75rem 0;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.curve-presets h4 i {
    color: var(--accent-color);
}

.advanced-automation {
    animation: slideIn 0.3s ease;
}

/* ==================== Measure Markers ==================== */
.measure-marker {
    position: absolute;
    top: -20px;
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
}

.measure-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-color);
    opacity: 0.5;
}

.measure-divider.active {
    background: var(--accent-color);
    opacity: 1;
}

/* ==================== Vertical Loop Controls ==================== */
.loop-control-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-width: 40px;
}

.loop-control-vertical input[type="range"] {
    writing-mode: vertical-lr;
    direction: rtl;
    width: 8px;
    min-width: 8px;
    height: 100px;
    min-height: 100px;
    -webkit-appearance: slider-vertical;
}

/* Firefox vertical slider support */
@-moz-document url-prefix() {
    .loop-control-vertical input[type="range"] {
        width: 8px;
        min-width: 8px;
        height: 100px;
        orient: vertical;
    }
}

/* ==================== Copy/Paste UI ==================== */
.copy-paste-container {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

.cp-btn {
    width: 24px;
    height: 24px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 10px;
    color: var(--text-secondary);
}

.cp-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    transform: scale(1.1);
}

.cp-btn.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
    box-shadow: 0 0 8px rgba(244, 114, 182, 0.5);
}

.copy-btn.active {
    background: #10b981;
    border-color: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

.paste-btn.active {
    background: #f59e0b;
    border-color: #f59e0b;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

/* Cell selection state for copy */
.grid-cell.copy-selected {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: #10b981 !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.6) !important;
}

.string-cell.copy-selected {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: #10b981 !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.6) !important;
}

.bass-cell.copy-selected {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: #10b981 !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.6) !important;
}

.lead-cell.copy-selected {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: #10b981 !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.6) !important;
}

/* Paste mode indicator on cells */
.grid-cell.paste-target {
    animation: pastePulse 0.5s ease-in-out infinite;
}

@keyframes pastePulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.3);
    }
}

/* ==================== Loop Count Control ==================== */
.loop-count-control {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-top: 4px;
}

.loop-count-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.loop-count-select {
    width: 40px;
    padding: 2px 4px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}

.loop-count-select:hover {
    border-color: var(--accent-color);
}

.loop-count-select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(244, 114, 182, 0.2);
}

/* Color variations for different instruments */
.melody-group-row .loop-count-select {
    border-color: var(--accent-color);
}

.bass-group-row .loop-count-select {
    border-color: #a78bfa;
}

.lead-group-row .loop-count-select {
    border-color: #34d399;
}

/* Header adjustments for loop count */
.melody-group-header,
.bass-group-header,
.lead-group-header {
    min-width: 70px;
}

/* ==================== Section Visibility Toggle ==================== */
/* Hide all rows by default when section visibility is active */
.melody-group-row.hidden,
.bass-group-row.hidden,
.lead-group-row.hidden,
.rhythm-group-row.hidden {
    display: none !important;
}

/* Show only selected rows */
.melody-group-row.show,
.bass-group-row.show,
.lead-group-row.show,
.rhythm-group-row.show {
    display: flex !important;
}

/* Active state for timeline rows */
.section-timeline .group-grid-row.active {
    background: linear-gradient(135deg, rgba(244, 114, 182, 0.2) 0%, rgba(236, 72, 153, 0.2) 100%);
    border-color: var(--accent-color);
    box-shadow: 0 4px 16px rgba(244, 114, 182, 0.4);
}

/* ==================== Section Repeats Control ==================== */
#sectionRepeatsControl {
    margin-bottom: 1rem;
}

#sectionRepeatsContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.section-repeat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    min-width: 100px;
    transition: all 0.2s ease;
}

.section-repeat-item:hover {
    border-color: var(--accent-color);
    transform: translateY(-2px);
}

.section-repeat-item.active {
    border-color: var(--accent-color);
    box-shadow: 0 4px 12px rgba(244, 114, 182, 0.3);
}

.section-repeat-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
}

.section-repeat-range {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.section-repeat-item.active .section-repeat-name {
    color: var(--accent-color);
}

.section-repeat-select {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.section-repeat-select label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.section-repeat-select select {
    width: 50px;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    border: 2px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.section-repeat-select select:hover {
    border-color: var(--accent-color);
}

/* Disabled state styles for section controls */
.form-select:disabled,
.form-select-small:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

.preset-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Disabled section styles */
.section.disabled {
    opacity: 0.6;
}

.section.disabled .form-select,
.section.disabled .form-select-small,
.section.disabled .preset-btn,
.section.disabled button {
    pointer-events: none;
}

.section.disabled .harmonics-grid,
.section.disabled .strings-grid,
.section.disabled .bass-grid,
.section.disabled .lead-grid,
.section.disabled .rhythm-grid {
    opacity: 0.4;
}

/* Section Repeats Focus */
.section-repeat-select select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(244, 114, 182, 0.2);
}

/* ==================== Mobile Touch Improvements ==================== */
@media (max-width: 767px) {
    /* Touch-friendly interactive elements (group-step is display-only, no active state) */
    .rhythm-cell,
    .string-cell,
    .bass-cell,
    .lead-cell,
    .timeline-step {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    
    /* Larger touch targets for rhythm cells */
    .rhythm-cell {
        height: 44px;
    }
    
    /* Touch-friendly group rows */
    .melody-group-row,
    .bass-group-row,
    .lead-group-row,
    .rhythm-group-row {
        padding: 0.75rem;
        gap: 0.5rem;
    }
    
    /* Compact headers */
    .melody-group-header,
    .bass-group-header,
    .lead-group-header {
        min-width: 50px;
    }
    
    /* Touch-friendly buttons */
    .btn {
        min-height: 44px;
        padding: 0.75rem 1rem;
    }
    
    /* Touch-friendly form selects */
    .form-select,
    .form-select-small {
        min-height: 44px;
        padding: 0.5rem 0.75rem;
    }
    
    /* Better spacing for mobile */
    .step-groups-accordion {
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }
    
    .accordion-group {
        min-width: 140px;
        max-width: 180px;
    }
    
    .accordion-group.expanded {
        max-width: 240px;
    }
    
    /* Touch-friendly accordion header */
    .accordion-group-header {
        padding: 0.5rem 0.75rem;
        min-height: 44px;
    }
    
    /* Better touch feedback for interactive cells */
    .cell:active,
    .rhythm-cell:active,
    .string-cell:active,
    .bass-cell:active,
    .lead-cell:active,
    .timeline-step:active {
        transform: scale(0.95);
    }
    
    /* Disable hover effects on touch devices */
    @media (hover: none) {
        .rhythm-cell:hover,
        .string-cell:hover,
        .bass-cell:hover,
        .lead-cell:hover,
        .timeline-step:hover {
            transform: none;
        }
    }
    
    /* Prevent text selection on touch */
    .rhythm-cell,
    .string-cell,
    .bass-cell,
    .lead-cell,
    .group-step,
    .timeline-step,
    .group-grid-row,
    .melody-group-row,
    .bass-group-row,
    .lead-group-row,
    .rhythm-group-row {
        user-select: none;
        -webkit-user-select: none;
    }
    
    /* Better scrolling */
    .strings-grid,
    .bass-grid,
    .lead-grid,
    .rhythm-grid,
    .section-timeline,
    .timeline-container {
        -webkit-overflow-scrolling: touch;
    }
}