Update nutri_call.html

nutri_call.html

@@ -123,6 +123,7 @@
     padding: 1em;
     margin-bottom: 20px;
     border-radius: 8px;
+    width: fit-content;
 }
 .calculation-box legend {
     font-weight: bold;
@@ -130,78 +131,78 @@
     padding: 0 10px;
 }
 
-/* Контейнер */
+/* Основной контейнер */
 .calculation-container {
     display: flex;
-    flex-direction: column;
-    gap: 15px;
+    gap: 30px;
+    align-items: flex-start;
 }
 
-/* Кнопка */
-#calculate-btn {
-    background-color: #2e8b57;
-    color: white;
-    border: none;
-    padding: 8px 16px;
-    font-size: 16px;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: background-color 0.3s;
-    margin-bottom: 10px;
-    align-self: flex-start;
-}
-#calculate-btn:hover {
-    background-color: #3cb371;
+/* Основные контролы (кнопка, литры, точность) */
+.main-controls {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    min-width: 150px;
 }
 
-/* Секция "Усиление" */
-.compensation-section {
+/* Блок усиления */
+.enhancement-block {
     display: flex;
     flex-direction: column;
-    gap: 8px;
-    margin-bottom: 10px;
+    gap: 5px;
 }
-.compensation-title {
+.enhancement-title {
     font-weight: bold;
     color: #2e8b57;
     margin-bottom: 5px;
 }
-
-/* Группы полей ввода */
-.compensation-weights {
+.enhancement-controls {
     display: flex;
-    gap: 15px;
-    flex-wrap: wrap;
+    flex-direction: column;
+    gap: 8px;
 }
-.weight-input-group {
+.enhancement-input {
     display: flex;
     align-items: center;
     gap: 8px;
 }
-.weight-input-group label {
-    min-width: 70px; /* Фиксированная ширина для выравнивания */
+.enhancement-input label {
+    min-width: 70px;
     text-align: right;
 }
 
-/* Обычные поля ввода */
+/* Общие стили для элементов */
+#calculate-btn {
+    background-color: #2e8b57;
+    color: white;
+    border: none;
+    padding: 8px 16px;
+    font-size: 16px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    margin-bottom: 5px;
+}
+#calculate-btn:hover {
+    background-color: #3cb371;
+}
+
 .input-group {
     display: flex;
     align-items: center;
     gap: 8px;
 }
 .input-group label {
-    min-width: 70px;
-    text-align: right;
+    min-width: 60px;
 }
 
-/* Поля ввода */
 input[type="number"] {
     width: 80px;
     padding: 5px;
     border: 1px solid #ccc;
     border-radius: 4px;
 }
-  
 </style>
 </head>