diff --git a/style.css b/style.css
index 7a7c87d..9fba074 100644
--- a/style.css
+++ b/style.css
@@ -1215,12 +1215,42 @@
   color: var(--bme-on-surface-dim);
 }
 
-.bme-toggle-item input {
-  width: 18px;
-  height: 18px;
+.bme-toggle-item input[type="checkbox"] {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 40px;
+  height: 22px;
+  min-width: 40px;
   margin-top: 2px;
   flex-shrink: 0;
-  accent-color: var(--bme-primary);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.12);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  position: relative;
+  cursor: pointer;
+  transition: background 0.2s ease, border-color 0.2s ease;
+}
+
+.bme-toggle-item input[type="checkbox"]::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.5);
+  transition: transform 0.2s ease, background 0.2s ease;
+}
+
+.bme-toggle-item input[type="checkbox"]:checked {
+  background: var(--bme-primary, #a078ff);
+  border-color: var(--bme-primary, #a078ff);
+}
+
+.bme-toggle-item input[type="checkbox"]:checked::after {
+  transform: translateX(18px);
+  background: #fff;
 }
 
 .bme-prompt-card-actions {