/* CSS retained for mobile-friendly layout and previous styling */

        body {

            font-family: 'Segoe UI', sans-serif;
            background-color: #f4f8fb;

            color: #333;

            display: flex;

            flex-direction: column;

            align-items: center;

            padding: 10px;
            /* Reduced padding for mobile */

           

        }


        /* NEW: Start Button Styling */
        .tuner-start-button {
            padding: 10px 20px;
            font-size: 1.2rem;
            font-weight: bold;
            color: white;
            background-color: green;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.2s, box-shadow 0.2s;
            margin-bottom: 15px;
            width: 90%;
            max-width: 300px;
            box-shadow: 0 4px 10px rgba(18, 109, 180, 0.4);
        }

        .tuner-start-button:hover {
            background-color: #105a96;
        }

        .tuner-start-button.running {
            background-color: #ff4757;
            /* Red for Stop */
            box-shadow: 0 4px 10px rgba(255, 71, 87, 0.4);
        }

        .tuner-start-button.running:hover {
            background-color: #e63645;
        }


        .controls {

            background: white;
            padding: 15px; /* Reduced padding for mobile */

            border-radius: 12px;
            box-shadow: 0 4px 10px rgba(18, 109, 180, 0.1);

            margin-bottom: 5px; 

            text-align: center;

            width: 95%;
            /* Use percentage for width */

            max-width: 400px;
            /* Max width constraint retained */

            border-top: 5px solid #126db4;
        }



        .input-group { 

            margin-bottom: 5px;
            display: flex;

            justify-content: center;

            align-items: center;

            gap: 10px;

        }

        

        .caption {

            font-size: 0.8rem;
            color: #555;

            margin-bottom: 15px;

            display: block;

        }



        /* Chart/Table Styling */

        .notation-chart {

            width: 100%;
            border-collapse: collapse;

            font-size: 0.7rem; 

            margin: 10px 0 20px 0;

            background: #f8f8f8;

            border-radius: 5px;

            overflow: hidden;

            table-layout: fixed;
        }

        .notation-chart th, .notation-chart td {

            border: 1px solid #ddd;
            padding: 3px;

            text-align: center;

            white-space: nowrap;

        }

        .notation-chart th {

            background-color: #126db4;
            color: white;

            font-weight: bold;

        }

        .notation-chart tr:nth-child(even) { background-color: #f2f2f2;
        }

        

        .notation-chart td:nth-child(3) {

            font-weight: bold;
            color: #126db4;

            cursor: pointer; 

            transition: background 0.1s;

        }

        .notation-chart td:nth-child(3):hover { background-color: #e0f0ff;
        }

        

        details {

            margin-top: 15px;
            margin-bottom: 15px;

            border: 1px solid #ddd;

            border-radius: 6px;

            padding: 10px;

            text-align: left;

            background: #fff;
        }

        summary {

            font-weight: bold;
            color: #126db4;

            cursor: pointer;

            list-style: none; 

        }

        summary::-webkit-details-marker { display: none;
        }

        summary::before { content: '► '; margin-right: 5px;
        }

        details[open] summary::before { content: '▼ ';
        }



        .checkbox-container {

            display: flex;
            align-items: center;

            justify-content: center;

            gap: 8px;

            font-size: 0.9rem;

            cursor: pointer;
        }

        input[type="checkbox"] {

            transform: scale(1.2);
            accent-color: #126db4;

        }



        /* Manual Input Field Styling */

        .manual-input-container {

            /* Hidden by default so it disappears in Auto Mode */
            display: none;

            margin-top: 5px;
            margin-bottom: 5px;
            text-align: center;

        }
        .manual-input-container.active {

            display: block;
        }

        input#manualPitchInput {

            padding: 5px;
            border: 2px solid #126db4;

            border-radius: 5px;

            width: 60px;

            text-align: center;

            font-weight: bold;

            font-size: 1rem;

            text-transform: uppercase;
        }



        .sharp-chart {

            width: 100%;
            border-collapse: collapse;

            font-size: 0.8rem;

            margin: 10px 0 20px 0;

            table-layout: fixed;

            background: #e6f0fa;

            border-radius: 8px;

            overflow: hidden;
            box-shadow: 0 2px 5px rgba(18, 109, 180, 0.1);

        }

        .sharp-chart th {

            background-color: #126db4;
            color: white;

            padding: 5px;

            font-size: 0.9rem;

        }

        .sharp-chart td {

            border: 1px solid #cce0f0;
            padding: 6px 2px;

            text-align: center;

            font-weight: bold;

            color: #126db4;

            cursor: pointer;

            transition: background-color 0.1s;

            font-size: 0.75rem;
        }

        .sharp-chart td:hover { background-color: #cce0f0;
        }



        /* Octave Colors for Quick Note Selection */

        .sharp-chart .octave-4-row {

            background-color: #d1e5f0;
            /* Light Blue */

        }

        .sharp-chart .octave-5-row {

            background-color: #f7f7f7;
            /* Near White */

        }

        .sharp-chart .octave-6-row {

            background-color: #f0d1d1;
            /* Light Red/Pink */

        }





        /* Tuner Visuals */

        .tuner-container {

            position: relative;
            width: 95%; /* Use percentage for width */

            max-width: 400px;
            height: 500px;

            background: white;

            border-radius: 20px;

            box-shadow: 0 10px 30px rgba(18, 109, 180, 0.15);

            display: flex;

            justify-content: center;

            align-items: center;
            overflow: hidden; 

            border: 1px solid #e1eaf0;

            margin-bottom: 20px;

        }



        .tine {

            width: 60px;
            height: 380px;

            background: linear-gradient(90deg, #e0e0e0, #ffffff, #c0c0c0, #ffffff, #e0e0e0); 

            border-radius: 0 0 10px 10px;

            position: relative;

            z-index: 5;
            box-shadow: 4px 4px 15px rgba(0,0,0,0.3), inset 0 0 8px rgba(255, 255, 255, 0.7);

            border: 1px solid #a0a0a0;

            display: flex;
            justify-content: center;

            align-items: center;
            
            /* Reverting vertical offset as requested: do not change positioning */
            /* transform: translateY(10px);
            */ 
        }



        .tine-text {

            color: #333;
            font-weight: bold;

            font-size: 1.8rem; 

            text-shadow: 0 1px 3px rgba(0,0,0,0.2); 

            text-align: center;

            display: none; 

            transform: rotate(-90deg); 

            white-space: nowrap;
        }



        .center-line {

            position: absolute;
            top: 50%; left: 0; right: 0;

            height: 2px;

            background: rgba(18, 109, 180, 0.2);

            z-index: 1;

            display: flex;

            justify-content: space-between;
            padding: 0 10px;

        }

        .center-line span { font-size: 10px; color: #126db4; margin-top: -15px;
            opacity: 0.7;}



        .needle {

            position: absolute;
            left: 50%; top: 50%;

            width: 240px;

            height: 4px;

            background: #ff4757;

            transform: translate(-50%, -50%);

            transition: top 0.05s linear; 

            z-index: 6;
            border-radius: 2px;

            opacity: 0.3;

        }

        .needle.active { opacity: 1;
        }

        .needle.perfect { 
            /* Needle turns green when perfect */
            background: #2ed573; 
            box-shadow: 0 0 15px #2ed573; 
            height: 6px;
        }



        .hammer-group {

            position: absolute;
            left: 50%;

            transform: translateX(-50%);

            display: none; 

            z-index: 20;

            text-align: center;

            width: 100%;
        }



        .hammer-icon { font-size: 40px; display: block;
        }



        .tap-text {

            /* STYLES FOR RED BACKGROUND / WHITE TEXT */

            background: #cc0000;
            color: white; 

            padding: 6px 12px;

            border-radius: 20px;

            font-size: 12px;

            font-weight: bold;

            white-space: nowrap;

            display: inline-block;

            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }



        .success-overlay {

            position: absolute;
            top: 30px;

            left: 50%;

            transform: translateX(-50%);

            background: rgba(18, 109, 180, 0.9);

            color: white;

            padding: 10px 40px;

            border-radius: 50px;

            font-size: 2rem;
            font-weight: bold;

            z-index: 30;

            opacity: 0;

            transition: opacity 0.2s;

            pointer-events: none; 

            box-shadow: 0 4px 15px rgba(0,0,0,0.2);

            letter-spacing: 2px;

            white-space: nowrap;
        }

        .success-overlay.show { opacity: 1;
        }



        .hammer-group.top {

            display: block;
            top: 30px; 

            animation: bounceTop 0.8s infinite alternate;

        }

        .hammer-group.bottom {

            display: block;
            bottom: 30px; 

            animation: bounceBottom 0.8s infinite alternate;

        }



        @keyframes bounceTop {

            from { transform: translateX(-50%) translateY(0);
            }

            to { transform: translateX(-50%) translateY(10px);
            }

        }

        @keyframes bounceBottom {

            from { transform: translateX(-50%) translateY(0);
            }

            to { transform: translateX(-50%) translateY(-10px);
            }

        }



        .status-area {

            margin-top: 10px;
            margin-bottom: 5px;

            font-size: 1.5rem;

            font-weight: 800;

            height: 40px;

            text-align: center;

            line-height: 40px;

            width: 95%;

            max-width: 400px;

            border-radius: 8px;

            color: #126db4;
            transition: background-color 0.2s, color 0.2s;

        }

        .detector-header {

            font-size: 1rem;
            font-weight: 600;

            margin-bottom: 5px;

            color: #555;

            width: 95%;

            max-width: 400px;

            text-align: center;
        }



        .status-area.error { background-color: #ff4757; color: white;
        }

        .status-area.perfect { background-color: #2ed573; color: white;
        }



        .mic-instruction {

            color: #ff4757;
            font-weight: bold;

            margin-top: 5px;

            animation: pulse 1.5s infinite;

        }



        @keyframes pulse { 

            0% { opacity: 0.6;
            } 

            50% { opacity: 1;
            } 

            100% { opacity: 0.6;
            } 

        }



        .debug-freq { font-size: 0.9rem;
            color: #888; margin-top: 5px; }

        

        /* New container for bottom elements */

        .controls-bottom {

            width: 95%;
            /* Use percentage for width */

            max-width: 400px;
            padding: 15px;

            margin-top: 10px;

            background: white;

            border-radius: 12px;

            box-shadow: 0 4px 10px rgba(18, 109, 180, 0.1);

        }