.layers { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.layer {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: #fff;
}
.layer.emoji { font-size: 1.5rem; width: 30px; text-align: center; }
.layer.info { flex: 1; }
.layer.name { font-weight: 700; font-size: 0.95rem; }
.layer input[type="range"] { width: 100%; accent-color: var(--primary); }
.layer.active { border-color: var(--primary); background: var(--primary-soft); }
.layer .toggle {
  width: 44px; height: 26px; border-radius: 999px; background: var(--border);
  position: relative; cursor: pointer; flex-shrink: 0; transition: background 0.15s;
}
.layer .toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  background: #fff; border-radius: 50%; transition: left 0.15s;
}
.layer.active .toggle { background: var(--primary); }
.layer.active .toggle::after { left: 21px; }