Profile: render settings checkboxes as toggle switches

The .form-group input rule (width:100% + appearance:none) stretched every
checkbox into an empty full-width box. Add a .toggle class styling a checkbox
as a sliding on/off switch and apply it to the TEF, hydration and live-share
toggles in the profile modal.

frontend/css/styles.css

@@ -257,6 +257,42 @@ body {
   appearance: none;
 }
 
+/* Toggle switch: a checkbox styled as a sliding on/off switch. Overrides the
+   full-width .form-group input rule above (which otherwise stretches a checkbox
+   into an empty box). Apply class="toggle" to <input type="checkbox">. */
+.form-group input[type="checkbox"].toggle {
+  width: 46px;
+  height: 26px;
+  flex: 0 0 auto;
+  padding: 0;
+  border-radius: 13px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  position: relative;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s;
+}
+.form-group input[type="checkbox"].toggle::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 3px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--muted);
+  transform: translateY(-50%);
+  transition: left 0.15s, background 0.15s;
+}
+.form-group input[type="checkbox"].toggle:checked {
+  background: var(--primary);
+  border-color: var(--primary);
+}
+.form-group input[type="checkbox"].toggle:checked::after {
+  left: 23px;
+  background: #fff;
+}
+
 select {
   background: var(--bg);
   color: var(--on-surface);

frontend/js/main.js

@@ -8256,7 +8256,7 @@ function showProfileModal() {
     </div>
     <div class="form-group">
       <label style="display:flex;align-items:center;gap:8px;cursor:pointer">
-        <input id="m-tef" type="checkbox" ${(GPS.config.tefFrac ?? 0) > 0 ? "checked" : ""}>
+        <input id="m-tef" class="toggle" type="checkbox" ${(GPS.config.tefFrac ?? 0) > 0 ? "checked" : ""}>
         Учитывать переваривание (TEF 10%)
       </label>
       <div style="font-size:11px;color:#9aa4ae;margin-top:2px">Часть съеденного тратится на переваривание. Расход масштабируется от еды; на поддержке баланс не меняется.</div>
@@ -8267,7 +8267,7 @@ function showProfileModal() {
     </div>
     <div class="form-group">
       <label style="display:flex;align-items:center;gap:8px;cursor:pointer">
-        <input id="m-hydr-on" type="checkbox" ${localStorage.getItem("baldav_hydr_on") !== "0" ? "checked" : ""}>
+        <input id="m-hydr-on" class="toggle" type="checkbox" ${localStorage.getItem("baldav_hydr_on") !== "0" ? "checked" : ""}>
         Следить за питьём на тренировке
       </label>
       <div style="font-size:11px;color:#9aa4ae;margin-top:2px">Во время заезда/VR копится потребность в воде (пот), а выпитое берётся из того, что ты логируешь в баланс (жидкость по water_pct). Молчит, пока успеваешь пить; громкий сигнал (канал будильника, пробивает громкость) - только когда отстаёшь сверх порога.</div>
@@ -8275,7 +8275,7 @@ function showProfileModal() {
     </div>
     <div class="form-group">
       <label style="display:flex;align-items:center;gap:8px;cursor:pointer">
-        <input id="m-live-on" type="checkbox" ${localStorage.getItem("baldav_live_on") === "1" ? "checked" : ""}>
+        <input id="m-live-on" class="toggle" type="checkbox" ${localStorage.getItem("baldav_live_on") === "1" ? "checked" : ""}>
         Делиться местоположением онлайн
       </label>
       <div style="font-size:11px;color:#9aa4ae;margin-top:2px">Пока включено, во время записи заезда телефон отправляет текущую точку на сервер раз в 10 секунд. Видно только тем, кому дан доступ, и только после входа. Выключается здесь же.</div>