.container {
        background-color: #1e1e1e;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    }
    .input-group {
        margin-bottom: 15px;
    }
    label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
        color: #bb86fc;
    }
    input[type="text"], 
    input[type="number"], 
    select {
        width: 100%;
        padding: 8px;
        border: 1px solid #333;
        border-radius: 4px;
        box-sizing: border-box;
        background-color: #2d2d2d;
        color: #e0e0e0;
    }
    input[type="text"]:focus, 
    input[type="number"]:focus, 
    select:focus {
        outline: none;
        border-color: #bb86fc;
        box-shadow: 0 0 0 2px rgba(187, 134, 252, 0.3);
    }
    button {
        background-color: #bb86fc;
        color: #121212;
        border: none;
        padding: 10px 5px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
        margin-right: 10px;
        transition: background-color 0.3s;
    }
    button:hover {
        background-color: #9a67ea;
    }
    button:disabled {
        background-color: #424242;
        color: #757575;
        cursor: not-allowed;
    }
    .buttons {
        margin-top: 20px;
        text-align: center;
    }
    .error {
        color: #cf6679;
        margin-top: 5px;
    }
    .result {
        margin-top: 20px;
        padding: 15px;
        background-color: #2d2d2d;
        border-radius: 5px;
        display: none;
	color: #bbbbbb;
    }
    .numbers-grid {
        margin-top: 20px;
        display: table;
	margin: auto;
	text-align: left;
    }



#sto {
    max-width: 300%; /* Максимальное расширение */
    transition: width 0.3s ease;
    margin: 0 auto;
    padding: 10px;
    box-sizing: border-box;
}




    .numbers-grid button {
        width: 25px;
        height: 40px;
        margin: 3px;
        font-size: 14px;
        background-color: #2d2d2d;
        color: #e0e0e0;
        border: 1px solid #333;
    }
    .numbers-grid button:hover:not(:disabled) {
        background-color: #3d3d3d;
    }





	.name-letter {
	        width: 40px;
	        height: 40px;
	        margin: 3px;
	        font-size: 14px;
	        background-color: #2d2d2d;
	        color: #e0e0e0;
	        border: 1px solid #333;
	}
	
	.name-letter:hover {
	    transform: scale(1.05);
	    background-color: #3d3d3d;
	}






    .background_color_blue {
        background-color: #3700b3 !important;
        color: white !important;
    }
    .background_color_green {
        background-color: #03dac6 !important;
        color: #121212 !important;
    }
    .background_color_red {
        background-color: #b00020 !important;
        color: white !important;
    }
    .instructions {
        background-color: #1f1f1f;
        padding: 15px;
        border-radius: 5px;
        margin-bottom: 20px;
        border-left: 4px solid #03dac6;
    }
    .instructions ol {
        padding-left: 20px;
    }
    .instructions li {
        margin-bottom: 8px;
    }
    #got {
        margin-top: 15px;
        padding: 10px;
    }