.mass-table th, .mass-table td { vertical-align: middle; text-align: center; }
        .mass-table input { width: 100%; min-width: 70px; text-align: center; }
        .mass-table .remove-row { color: #dc3545; cursor: pointer; font-size: 1.2rem; }
        .mass-table .remove-row:hover { opacity: 0.7; }
        .com-canvas { background-color: #f9f9f9; border: 1px solid #ddd; border-radius: 12px; margin-top: 1rem; width: 100%; height: auto; display: block; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
        .legend { display: flex; justify-content: center; gap: 2rem; margin: 0.75rem 0 0.2rem; flex-wrap: wrap; }
        .legend-color { width: 18px; height: 18px; border-radius: 50%; display: inline-block; margin-right: 0.3rem; }
        .legend-color.mass-point { background-color: #2c3e50; }
        .legend-color.com { background-color: #e67e22; }
        .legend-color.grid { background-color: #aaa; width: 18px; height: 2px; vertical-align: middle; }
        .physics-note { background-color: #eef5ff; border-left: 4px solid #2c3e50; padding: 1rem; margin: 1rem 0; border-radius: 8px; }
        .example-badge { background: #f0f2f5; padding: 0.3rem 0.8rem; border-radius: 20px; cursor: pointer; transition: 0.2s; }
        .example-badge:hover { background: #e0e4e8; transform: translateY(-1px); }
        .coord-display { font-family: 'Courier New', monospace; }
        .total-mass-badge { font-size: 1.2rem; background: #e9ecef; border-radius: 40px; padding: 0.2rem 1rem; display: inline-block; }